Question

这就是我现在所拥有的：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

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

$(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();
    });

});

Fiddle

Answer 2

在切换当前的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 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();
});

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

3 个答案:

Fiddle