将css类添加到父li和sub li

时间:2013-12-29 05:46:06

标签: javascript jquery css parent

我有一个如下的子菜单:

<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

5 个答案:

答案 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');

    });

});

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

答案 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;
}

DEMO

答案 2 :(得分:0)

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

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

答案 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