子菜单以隐藏在其他父菜单上，单击

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的兄弟姐妹的navigation2元素。

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

Answer 2

给你所有的子菜单一个类似“子菜单”的类

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

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