单击其他菜单项时隐藏/切换子菜单

这就是我现在所拥有的： JSfiddle

当您单击类别1然后单击类别2时，我希望关闭类别1的子菜单。 我怎样才能做到这一点？

我现在所做的就是在点击屏幕上的任何地方时关闭子菜单，菜单除外：

$(function () { $('nav ul li').not("nav ul li ul li").click(function(e){ $(this).children('ul').stop().toggle(); e.stopPropagation(); }); $("nav ul li ul li").click(function(e){ $(this).children('ul').stop().toggle(); e.stopPropagation(); }); }); $(document).click(function() { $("nav ul li ul").hide(); }); 

非常感谢任何回复！

Answer 1

在切换当前li之前隐藏所有li的 –

 $('nav ul li').not("nav ul li ul li").click(function (e) { e.stopPropagation(); $("nav ul li ul").hide(); $(this).children('ul').stop().toggle(); }); 

演示-----> http://jsfiddle.net/rd6bX/17/

Answer 2

如果您只有一个单击处理程序而不是为每个级别定义单独的处理程序，那么您可以实现多个级别：

 $(function () { $('nav > ul > li a').click(function (e) { e.preventDefault(); var $parentli = $(this).closest('li'); $parentli.siblings('li').find('ul:visible').hide(); $parentli.find('> ul').stop().toggle(); }); }); 

小提琴

Answer 3

$('ul',$(this).siblings()).slideUp(); 在切换ul之后添加它，在所有兄弟li元素中查找ul并隐藏它们。

像这样 ：

 $(function () { $('nav ul li').not("nav ul li ul li").click(function(e){ $(this).children('ul').stop().toggle(); $('ul',$(this).siblings()).slideUp(); e.stopPropagation(); }); $("nav ul li ul li").click(function(e){ $(this).children('ul').stop().toggle(); e.stopPropagation(); }); }); $(document).click(function() { $("nav ul li ul").hide(); });