Question

所以我试图使用3级深度的嵌套列表元素创建一个简单的侧边栏，因此有一个菜单，子菜单和子子菜单。一切似乎按预期运行，唯一的问题是，当我处于最深层次列表元素（子子菜单），并且我选择一个选项时，我的jquery事件以某种方式发生冲突，并且无意中折叠了菜单。我尝试使用特定于类的选择器来防止此问题，但没有成功。我希望点击子子菜单不折叠父列表。

此外，当子菜单打开时，子菜单选项和用户选择不同的子菜单选项（隐藏当前子菜单），然后返回到刚崩溃的初始菜单，子菜单选项仍在显示，应隐藏它们。

JQuery的

$('.docs-index-li-ul').hide();
$('.doc-index-li > a').click(function(){
    $('.docs-index-li-ul').hide();
    $(this).next('ul').show();
});
$('.doc-index-li .docs-index-li-ul li ul li').hide();
$('.docs-index-li-ul li > a').click(function(){
    $('.docs-index-li-ul li ul li').hide();
    $(this).next('ul').children('li').show();
});

这是一个小提琴：

http://jsfiddle.net/q7vay/

我感谢任何关于为什么会发生这种情况的建议以及如何解决这个问题。

非常感谢提前！

Answer 1

我做了两件事：

$('.docs-index-li-ul > li > a').click(function(){

在此处添加了一个子选择器，以便您立即li做出反应。然后补充说：

$('.doc-index-li .docs-index-li-ul li ul li a').click(function(e){
   e.stopPropagation(); 
});

要在单击这些子子菜单锚点时停止传播：

JSFiddle

具有子子菜单的可扩展子菜单

1 个答案: