클릭시 jQuery 애니메이션 하위 메뉴

Question

hover 대신 click을 사용하는 탐색 메뉴를 조합하여 하위 메뉴 (또는 드롭 다운)를 표시하려고합니다.

설정했는데 작동하지 않습니다. 다른 메뉴를 클릭 할 때 현재 열려있는 하위 메뉴를 닫는 방법을 모르겠습니다.

HTML :

<ul id="menu-primary-navigation" class="menu nav-main"> 

    <li class="nav-about"><a href="#">About us</a> 
    <ul class="sub-menu" style="display: none; "> 
     <li><a href="/what-we-do/">What we do</a></li> 
     <li><a href="/why-we-do-it/">Why we do it</a></li> 
    </ul> 
    </li> 

    <li class="nav-weare"><a href="#">Who we are</a> 
    <ul class="sub-menu" style="display: none; "> 
     <li><a href="/who-we-are/ambassadors/">Ambassadors</a></li> 
     <li><a href="/who-we-are/trustees/">Trustees</a></li> 
    </ul> 
    </li> 

    <li class="nav-involved"><a href="#">Get involved</a> 
    <ul class="sub-menu" style="display: none; "> 
     <li><a href="/get-involved/coach/">Become a coach</a></li> 
     <li><a href="/get-involved/academy/">Become an academy</a></li> 
    </ul> 
    </li> 

</ul> 

현재 내가이 jQuery를 사용하는 각 보여주는 하위 메뉴 숨기기 얻을 :

$('#menu-primary-navigation li a').click(function(e) { 
    e.preventDefault(); 
    $(this).next('.sub-menu').slideToggle('fast'); 
}); 

을하지만 문제는 그들이 독립적으로 작동 각각의 맨 위에 이동입니다 기타 (모두 한 번에 열 수 있음).

현재 열려있는 하위 메뉴를 닫고 클릭 된 링크의 하위 메뉴를 보여주는 다른 최상위 수준 링크의 클릭을 감지하는 방법이 필요합니다.

Answer 1

visible 및 slideToggle 항목을 선택할 수 있습니다.

다음은 그 클래스를 포함하는 요소를 찾아, 클래스 'submenuopen'부모의 클릭 이벤트에

$(this).addClass('submenuopen') 

를 추가 할 수 있습니다 귀하의 하위 메뉴 클릭 이벤트에서 [fiddle

$('#menu-primary-navigation > li > a').click(function(e) { // select only the child link and not all links, this prevents sub links from being selected. 
    var sub_menu = $(this).next('.sub-menu'); // store the current submenu to be toggled 
    e.preventDefault(); 
    $('.sub-menu:visible').not(sub_menu).slideToggle('fast'); // select all visible sub menus excluding the current one that was clicked on and close them 
    sub_menu.slideToggle('fast'); // toggle the current sub menu 
}); 

Answer 2

을합니다. 클래스를 제거하고 요소를 숨 깁니다.