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

現在の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

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