將css類添加到父li和sub li

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位父母添加“打開”課程。

注意：我嘗試實現無限級別的菜單

這是我的完整代碼小提琴

Answer 1

您只需在closest()方法中使用not:屬性來排除所有類的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事件）。 在#main-menu列表中查找所有li>a對，對應於子菜單項

$('#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

如果我理解正確的是能夠產生類似行為的菜單，那是因為我想提出一個替代解決方案：

樣品小提琴

$('#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（'li'）來獲取被點擊元素的頂級父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