點擊jQuery動畫子菜單

我試圖放在一起使用click而不是hover來顯示子菜單（或下拉菜單）的導航菜單。點擊jQuery動畫子菜單

我已經設置了它，但它不工作。點擊另一個時，我不知道如何關閉當前打開的子菜單。

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'); 
});

但問題是他們獨立工作，走在每個頂部其他（全部可以一次打開）。

我需要一種方法來檢測另一個關閉任何當前打開的子菜單的頂級鏈接的點擊並顯示點擊鏈接的子菜單。

來源

2011-10-06 Mr Jonny Wood

您可以選擇sub-menu項目，即visible和slideToggle它。

這裏有一個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 
});

來源

2011-10-06 16:37:27

除了如果您單擊打開的菜單關閉它，它會很好地工作，它會關閉，然後再次打開。 –

嘗試新的代碼。我修改了它以解釋不同的情況http://jsfiddle.net/UNJNy/3/ –

現在，它就像一個魅力。謝謝！ –

在您的子菜單中點擊事件，你可以添加一個類「submenuopen」

$(this).addClass('submenuopen')

在你的父點擊事件，查找包含類元素。刪除類並隱藏元素。

來源

2011-10-06 16:38:13 Jesse

點擊jQuery動畫子菜單

回答

相關問題