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

JQUERY

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

}); 

Answer 1

在您的点击事件开始时，隐藏当前 li 的 sibling 的 navigation2 元素。

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