아코디언 메뉴 - 위 또는 아래로 슬라이드 할 것을 어떻게 알 수 있습니까?

Question

아코디언 메뉴 (아래 코드)가 있는데 아코디언 메뉴 아래에 태그 상자가 있습니다. 아코디언 메뉴가 확장되면 내 태그 상자를 덮는 확장 메뉴 대신 내 태그 상자를 확장 메뉴 아래로 이동하려고합니다. 그래서 내가 열리는 하위 항목의 수를 계산 한 후 내 태그 상자의 CSS 속성 "top"값을 변경합니다.

<div id="accordion"> 
    <h3>NOTEBOOKS</h3> 

    <div class="sub_items" style="padding-top:0px;padding-bottom:0px;"> 
    <div onMouseOver="bgFadeIn(this)" onMouseOut="bgFadeOut(this)"> 
     <a href="http://127.0.0.1/casecrown_final/index.php/notebooks/black-slim.html"> 
     <span>BLACK SLIM</span></a> 
    </div> 

    <div onMouseOver="bgFadeIn(this)" onMouseOut="bgFadeOut(this)"> 
     <a href="http://127.0.0.1/casecrown_final/index.php/notebooks/checkered-slim.html"> 
     <span>CHECKERED SLIM</span></a> 
    </div> 
    </div> 

    <h3>Another item</h3> 
    <div class=sub_items" ...... 
....... 
..... 
</div> 

jQuery(document).ready(function() { 

    var countTotalCategories = jQuery('#accordion > h3').size(); 
    var defaultHeight = countTotalCategories * 30; 

    jQuery('#accordion> div').hide(); 

    jQuery('#accordion> h3').click(function() { 
     jQuery(this).next('div').slideToggle(400) 
     .siblings('div:visible').slideUp(400); 

     countProducts = jQuery(this).next('div').children('div:visible').size(); 
     var calculatedHeight= defaultHeight + 29 * countProducts; 

     jQuery('.mini-product-tags').css('top' , calculatedHeight + 'px'); 
}); 

지금, 사용자가 새 메뉴를 열었는지 또는 사용자가 메뉴를 닫고 있는지 어떻게 알 수 있습니까? 모든 아코디언 메뉴를 닫을 때 태그 상자 값을 기본값으로 설정할 수 있도록 사용자가 메뉴를 닫고 있는지 여부를 확인하는 방법을 알지 못합니다. jQuery 토글 이벤트가 처리되는 시점을 click 이벤트 이후로 밖에 알 수없는 것 같습니다.

Answer 1

가장 좋은 방법은 아니지만 <h3> (즉, 실제 아코디언 컨테이너 <div> 태그) 다음 요소 인 display: none 뒤에 오는 요소가 있는지 여부를 알아 보는 것이 가장 좋은 방법일까요?

컨테이너가 표시되면 click 이벤트가 닫힙니다. 컨테이너가 보이지 않으면 click 이벤트가 열립니다. 그래서

는 :

$(function() { 

    ... 

    $('#accordion> h3').click(function() { 
     if ($(this).next('div').css("display") == "none") 
     { 
     // My accordion pane is closed 
     } 
     $(this).next('div').slideToggle(400) 
     .siblings('div:visible').slideUp(400); 
     ... 

Answer 2

동의, 당신은 가시성을 확인 할 수 있습니다. 나는 또한 다른 마크 업 사용을 고려할 것이다.

// hide all that are not active 
$("dd:not(#active)").hide(); 

// when the link is clicked (could make this an h3 if you wanted) 
$("dt a").click(function(){ 
    // slide up the visible siblings 
    $(this).parent().next().siblings("dd:visible").slideUp("fast"); 
    // slide down the next parent 
    $(this).parent().next().slideDown("fast"); 
    // remove the class of current from any other dt a 
    $(".current").removeClass("current"); 
    // add the class of current to the anchor tag 
    $(this).addClass("current"); 
    return false; 
}); 

되는 HTML :

<dl> 
<dt><a href="#">SOME ITEMS!</a></dt> 
<dd> 
<ul> 
    <li>Something</li> 
    <li>Something</li> 
    <li>Something</li> 
    <li>Something</li> 
    <li>Something</li> 
    <li>Something</li>   
</ul> 
</dd> 

<dt><a href="#">OTHER ITEMS!</a></dt> 
<dd> 
<ul> 
    <li>Other thing</li> 
    <li>Other thing</li> 
    <li>Other thing</li> 
    <li>Other thing</li> 
    <li>Other thing</li> 
    <li>Other thing</li>   
</ul> 
</dd> 

<dt><a href="#">ZOMG, MORE ITEMS!</a></dt> 
<dd> 
<ul> 
    <li>MORE things</li> 
    <li>MORE things</li> 
    <li>MORE things</li> 
    <li>MORE things</li> 
    <li>MORE things</li> 
    <li>MORE things</li>   
</ul> 
</dd> 

여기

는 working example

JQuery와 인