Question

我有一个带有嵌套列表系统的侧边栏菜单，其中包含三个嵌套级别。最初只能看到第1级列表项。在单击level-1 li时，将显示level-2，类似于level-2 li。但是，由于我使用的jquery逻辑，在单击level-2中的子项（level-1 li的子项）时，level-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;
}

jQuery的：

$( 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");
});

SideBar垂直菜单：单击子项时项目折叠

1 个答案: