Question

我有<li>的水平导航，点击后我想让孩子ul下拉。我设法做到了这一点，但当你点击下一个<li>时，它不会关闭之前的。{/ p>

这是我的代码：

$("#menu-flag-menu li a").click(function(){
    var ul = $(this).next("ul");
    if (ul.is(":hidden")) {
        ul.slideToggle();
    } else {
        ul.slideToggle();
    }
});

HTML是：

<div class="menu-flag-menu-container">
<ul id="menu-flag-menu" class="menu">
<li id="menu-item-138""><a href="">DPSS 1064nm</a>
<ul class="sub-menu">
    <li id="menu-item-135" class=""><a href="">Starlase AO2</a></li>
    <li id="menu-item-135" class=""><a href="">Starlase AO2</a></li>
    <li id="menu-item-135" class=""><a href="">Starlase AO2</a></li>
    <li id="menu-item-135" class=""><a href="">Starlase AO2</a></li>
</ul>
</li>
<li id="menu-item-138""><a href="">DPSS 1064nm</a>
<ul class="sub-menu">
    <li id="menu-item-135" class=""><a href="">Starlase AO2</a></li>
    <li id="menu-item-135" class=""><a href="">Starlase AO2</a></li>
    <li id="menu-item-135" class=""><a href="">Starlase AO2</a></li>
    <li id="menu-item-135" class=""><a href="">Starlase AO2</a></li>
</ul>
</li>
<li id="menu-item-138""><a href="">DPSS 1064nm</a>
<ul class="sub-menu">
    <li id="menu-item-135" class=""><a href="">Starlase AO2</a></li>
    <li id="menu-item-135" class=""><a href="">Starlase AO2</a></li>
    <li id="menu-item-135" class=""><a href="">Starlase AO2</a></li>
    <li id="menu-item-135" class=""><a href="">Starlase AO2</a></li>
</ul>
</li>

</ul>

Answer 1

$("#menu-flag-menu li a").click(function(){ 

    // close all opened sub menus
    $("#menu-flag-menu > li > ul").slideUp();

    var ul = $(this).next("ul");     
    ul.slideToggle(); 
});

代码：http://jsfiddle.net/XaLER/2/

更新了代码：http://jsfiddle.net/XaLER/3/

JQUERY。菜单切换所需的帮助

1 个答案: