侧边栏垂直菜单:单击子项目时项目折叠

Question

我有一个侧边栏菜单，其中包含具有三个嵌套级别的嵌套列表系统。最初只有 1 级列表项可见。单击级别 1 li 时，将显示级别 2，级别 2 li也是如此。但是，由于我使用的jquery逻辑，在单击级别-2（这是级别-1 li的子项）中的子项时，将触发级别1 li事件，并且子项菜单再次隐藏。代码如下 -

.HTML：

<ul class="level-1">
    <li>
        Category
        <ul class="level-2">
            <li>
                <div class="arrow"></div>
                Sub 1
                <ul class="level-3">
                    <li>
                        <div class="arrow"></div>
                        Sub 2
                    </li>
                    <li>
                        <div class="arrow"></div>
                        Sub 2
                    </li>
                </ul>
            </li>
            <li>
                <div class="arrow"></div>
                Sub 1
            </li>
            <li>
                <div class="arrow"></div>
                Sub 1
            </li>
        </ul>
    </li>
</ul>

.CSS：

.categories ul{
    margin:10%;
}
.categories ul li{
    font-size: 2.5vh;
    font-family: "Droid Sans";
    margin:0 0 5% 0;
}
.categories ul > li:hover{
    cursor: pointer;
    color:orange;
}
.categories ul li ul li{
    font-size:2vh;
    margin:0 0 5% 0;
}
.categories ul li ul li .arrow{
    width: 5%;
    border: none;
    border-left: 1px solid black;
    border-radius: 0;
    border-bottom: 1px solid black;
    padding: 5% 0 0 0;
    margin: 0 5% 0 10%;
    float: left;
}
.categories ul li ul li ul li{
    font-size: 1.8vh;
}
.categories ul li ul li ul li .arrow{
    width:2%;
    padding:2% 0 0 0;
    margin:0 2% 0 30%;
}
.hidden{
    display:none;
}

j查询：

$( document ).ready(function() {
    $('.level-2').toggleClass('hidden');
    $('.level-3').toggleClass('hidden');
});
$(".level-1 li").click(function(){
    $(this).find(".level-2").toggleClass("hidden");
});
$(".level-2 li").click(function(){
    $(this).find(".level-3").toggleClass("hidden");
});

这是jsfiddle链接：http://jsfiddle.net/SpiderWasp42/t65k4kc8/

请提出解决此问题的方法。干杯

Answer 1

每次单击.level-2 li时，您也会触发.level-1 li单击，因为.level-2元素包含在.level-1中。 您要么不需要使用 toggleClass，要么更明确地酌情使用 addClass 和 removeClass（通过检查父状态和子状态等）。 或者，您可以添加一个stopPropagation调用，该调用将在事件处理完毕后阻止冒泡。

我在你的小提琴中尝试了以下内容，它似乎可以解决问题。

$( document ).ready(function() {
    $('.level-2. .level-3').toggleClass('hidden');
});
$(".level-1 li").click(function(ev){
    ev.stopPropagation();
    $(this).find(".level-2").toggleClass("hidden");
});
$(".level-2 li").click(function(ev){
    ev.stopPropagation();
    $(this).find(".level-3").toggleClass("hidden");
});