jquery Slideup Slidedown - 停止在当前列表项上重新打开

Question

我有以下菜单 - 它工作正常。我的工作原理是，当单击列表项时，它会下拉。单击另一个列表项时，旧列表项将关闭，而单击的列表项将打开。 但是 - 当单击已打开的列表项(将其关闭)时。它关闭然后再次打开。我怎样才能让它关闭而不再次重新打开。 请参阅下面的 jsfiddle 和代码。 谢谢

http://jsfiddle.net/Bx5cu/15/

<nav id="global_nav">
   <ul class="no-js">
     <li><a href="#">ABOUT US</a>
     <ul>
        <li><a href="#">About Us</a></li>
     </ul>
     </li>
     <li><a href="#">PRODUCTS</a>
     <ul>
        <li><a href="#">Products</a></li>
        <li><a href="#">Tractor</a></li>
        <li><a href="#">Organic</a></li>
    </ul>
    </li>
  </ul>
</nav>

JS

$(document).ready(function(){
$('#global_nav > ul').toggleClass('no-js js');

var menuList = $("#global_nav").find(".js").find("li");
menuList.find("ul").hide();
menuList.on("click", function(){

menuList.removeClass("selected");
menuList.find("ul").slideUp(400);
$(this).find("ul").slideDown(400);
$(this).addClass("selected");


});

});

编辑 感谢您的所有投入

让它与以下内容一起工作 - 我使用了首先回答问题的人提交的条件，但现在找不到他们的答案 - 我只是稍微调整了一下，但这是 jsfiddle: link - 现在一切都很好 - 谢谢:)

新的JS

$(document).ready(function(){
$('#global_nav > ul').toggleClass('no-js js');

var menuList = $(".js").find("li");
menuList.find("ul").hide();
menuList.on("click", function(){
    menuList.find("ul").slideUp(400);
    if (!($(this).find("ul").is(":visible"))) {
        menuList.removeClass("selected");
        $(this).find("ul").slideDown(400);
        $(this).addClass("selected");       
    };  
});

});

Answer 1

您可以像这样切换它们，而不是显式显示和隐藏 ul:

$(this).find("ul").slideToggle(400);
$(this).toggleClass("selected");

编辑

当您希望一次只打开一个菜单时，请在切换之前添加以下行:

menuList.find("ul").slideUp(400);

参见http://jsfiddle.net/D3edP/1/