我有以下菜单 - 它工作正常。我让它在单击列表项时会下拉。单击另一个列表项时,旧的会关闭,而单击的会打开。但是 - 单击已打开的列表项时(关闭它)。它关闭然后重新打开。我怎样才能让它关闭而不重新打开。请参阅下面的 jsfiddle 和代码。谢谢
<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:链接- 现在一切都很好 - 谢谢:)
新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");
};
});
});