Question

我有一个如下的子菜单：

<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

Answer 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');

    });

});

检查链接http://jsfiddle.net/GEj4z/11/

Answer 2

我认为你应该使用不同的选择器（对于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;
}

DEMO

Answer 3

如果我理解正确的是能够产生类似行为的菜单，那是因为我想提出另一种解决方案：

Sample Fiddle

$('#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。我希望它有所帮助。

Answer 4

在点击活动中，使用$（this）.parents（＆＃39; li＆＃39;）获取点击元素的顶级父级li。我希望这会有所帮助。

Answer 5

我找到了解决方案！我的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

将css类添加到父li和sub li

5 个答案: