jquery - 单击另一个菜单项时隐藏/切换子菜单

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

});

小提琴

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