Question

HTML：

<ul class="main_list">
    <li class="list_folder">One</li>
    <li class="list_folder">Two</li>
    <li class="list_folder">New list <ul class="hide_list">
            <li class="list_folder">New one</li>
            <li class="list_folder">New Two</li>
            <li class="list_folder">Third list<ul class="hide_list">
                    <li class="list_folder">Third one</li>
                    <li class="list_folder">Third two</li>
                </ul></li>
        </ul></li>
</ul>

我想做什么：所有带有“hide_list”类的子列表都用CSS隐藏。当我点击包含隐藏列表的li时，我希望隐藏列表切换打开/关闭。我的jquery代码：

$('.list_folder').on('click',function(){
    $(this).children('.hide_list').slideToggle();
}

问题：它适用于第一个子列表，但是当我更深入地点击下一个子列表时，它将选择下一个更深的列表以及外部列表，结果整个列表将崩溃。

我做错了什么？有什么建议吗？

Answer 1

$('.list_folder').on('click',function(e){
    e.stopImmediatePropagation();
    $(this).find('.hide_list:first').slideToggle();
});

<强> DEMO

注意

您无需使用.children()，.find()即可完成您的工作。

.stopImmediatePropagation（）使其余的处理程序保持不变执行并防止事件冒泡DOM树。

详细了解 .stopImmediatePropagation()

Answer 2

你的功能是对的。你必须再添加一行event.stopImmediatePropagation()。

$('.list_folder').on('click',function(event){
  /* add one more line */
  event.stopImmediatePropagation();
  $(this).children('.hide_list').slideToggle();
}

仅从子列表中选择子项（）

2 个答案:

注意