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

为所有子菜单提供类似“子菜单”

的类

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

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

Answer 2

在点击活动开始时，隐藏当前李的兄弟姐妹＆＃39; navigation2 elements。

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

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

2 个答案: