0

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

此外,当使用子子菜单选项打开子菜单并且用户选择不同的子菜单选项(隐藏当前子菜单)时,然后返回到刚刚折叠的初始选项,子子-menu 选项仍然显示,当它们应该被隐藏时。

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/

我很感激有关为什么会发生这种情况以及如何解决它的任何建议。

提前谢谢了!

4

1 回答 1

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

于 2013-11-02T14:19:09.380 回答