jquery - 子菜单隐藏在其他父菜单上单击

Question

我正在为自定义视差网站构建带有子菜单的菜单。单击父菜单时；子菜单保持显示，这是需要的。我想要做的是在单击其他父菜单项时隐藏子菜单。我真的可以使用一些帮助，因为我是 j 查询的新手。这是我的代码..

HTML

<ul class="navigation">
    <li data-slide="2">estate
        <ul class="navigation2">
            <li data-slide="2">land</li>
            <li data-slide="3">varietal</li>
            <li data-slide="4">people</li>
            <li data-slide="6">practices</li>
            <li data-slide="9">future offerings</li>
        </ul>
    </li>
    <li data-slide="10">about</li>
    <li data-slide="13">location</li>
    <li data-slide="14">contact</li>
</ul>

CSS

.navigation {
    position:fixed;
    text-align:center;
}
.navigation li {
    display:block;
}
.navigation li:hover, .active {
    cursor:pointer;
    text-decoration:underline;
}
.navigation2 {
    position:fixed;
    text-align:right;
    left:50%;
}
.navigation2 li {
    color:#000;
}
.navigation2 li:hover, .active {
    cursor:pointer;
    text-decoration:underline;
}

查询

$('.navigation2').hide();
$('.navigation').children().click(function () {
    $(this).children('.navigation2').slideToggle(1000);
}).children('.navigation2').click(function (event) {
    event.stopPropagation();

}); 

Answer 1

在单击事件开始时，隐藏当前 li 的兄弟姐妹的 navigation2 元素。

$('.navigation').children().click(function () {
    $(this).siblings().children('.navigation2').hide(); //add this line
    // rest of your code here.
});

Answer 2

给你所有的子菜单一个像'submenu'这样的类

然后，在单击任何父菜单时，您可以通过执行以下操作隐藏所有子菜单：

$('.submenu').hide();