我有一个如下的子菜单:
<ul id="main-menu" class="" style="">
<li class="root-level has-sub">
<a href="#">Menu 1</a>
<ul>
<li><a href="#">Sub-menu 1</a></li>
<li><a href="#">Sub-menu 2</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li class="root-level has-sub"> <!-- here -->
<a href="#">Menu 3</a>
<ul>
<li class="root-level has-sub"> <!-- add class 'opened' here and -->
<a href="#">Sub-menu 3</a>
<ul>
<li><a href="#">Sub-sub-Menu 1</a></li> <!-- this -->
<li><a href="#">Sub-sub-Menu 2</a></li> <!-- when user click this or -->
</ul>
</li>
</ul>
</li>
我想要的是,当我点击孩子时,它会将'打开'类添加到父级并突出显示单击的元素。我的代码仅在菜单1上成功,在菜单3上失败。
请注意,在菜单3中,子菜单1和子菜单2有2个父项。所以我的问题是,如果我点击子菜单1或子子菜单2它将突出显示并向上面的2位父母添加“打开”课程。
注意:我尝试实现无限级别的菜单
这是我的完整代码Fiddle
答案 0 :(得分:1)
您只需使用not:
方法中的closest()
属性排除所有类root-level
$(function () {
$('ul#main-menu li ul li').click(function (e) {
e.preventDefault();
//we search for the first ancestor of this which is a li
$(this).closest('li:not(".root-level")').addClass('active').siblings().removeClass('active');
$('.active:first').closest('ul').addClass('opened');
});
});
答案 1 :(得分:1)
我认为你应该使用不同的选择器(对于click
事件)。在li>a
列表中查找与子菜单项对应的所有#main-menu
对
$('#main-menu li>a').click(function (e) {
e.preventDefault();
$('.active').removeClass('active');
$('.opened').removeClass('opened');
$(this).parent('li').addClass('active').parents('.root-level').addClass('opened');
//------------------------------------------------------^-----------------------------
// selects all parents with the 'root-level' class
});
将css修改为:
#main-menu .active {
background-color:#df0000;
color:#fff;
}
答案 2 :(得分:0)
如果我理解正确的是能够产生类似行为的菜单,那是因为我想提出另一种解决方案:
$('#main-menu').on('click','li:not(.root-level)',function(e){
$('.parent').removeClass('parent');
$('.selected').removeClass('selected');
$(this).parents('li.root-level').children('a').addClass('parent');
$(this).children('a').addClass('selected');
});
在此解决方案中,父菜单突出显示,并且单击的项目再次标记为已选中我想分享此问题的POV。我希望它有所帮助。
答案 3 :(得分:0)
在点击活动中,使用$(this).parents(&#39; li&#39;)获取点击元素的顶级父级li。我希望这会有所帮助。
答案 4 :(得分:0)
我找到了解决方案!我的jquery是:
$(function () {
$('ul#main-menu li ul li').click(function (e) {
e.preventDefault();
$(this).closest('li:not(".root-level")').addClass('active').siblings().removeClass('active');
$(this).parents('li').addClass('opened');
$(this).closest('li:has(".root-level")').removeClass('active');
});
});
这是我的完整代码JSFiddle