多級下拉菜單切換無法使用jQuery

Question

首先，我要告訴您，我在jquery方面並不弱，因此在這里提供幫助將使我學到很多有關jquery的知識。 我正在嘗試使用jquery擴展2級li菜單，但可惜的是，在搜索google一段時間之后，我想在這里發布我的問題。 所以我的問題html骨架有點像下面，在我從事wp導航之前。

<div class="mobile-menu">
    <div id="megaMenu">
        <div id="megaMenuToggle"></div>
        <ul id="megaUber>
            <li>
                <ul>
                    <li>
                        <ul>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </li>
                   <li></li>
                </ul>
             </li>
             <li></li>
             <li></li>
             <li></li>
         </ul>
    </div>
</div>

現在的問題是我可以在切換中打開級別1 li，但是在打開級別2時不會切換。 這是我的CSS代碼進行切換。

.mobile-menu #megaMenu #megaUber > li.active > a + ul {
    display: block !important;}

.mobile-menu #megaMenu #megaUber > li > a + ul {
    display: none !important;}

.mobile-menu #megaMenu #megaUber > li > ul > li.actives > a + ul {
    display: block !important;}
.mobile-menu #megaMenu #megaUber > li > ul > li > a + ul {
    display: none !important}

這是我編寫的適用於1級li＆megaMenuToggle div切換的jQuery代碼，但不適用於2級。

jQuery(function($){
    $(".mobile-menu #megaMenu #megaMenuToggle").on('click', function(){
      $(".mobile-menu #megaMenu #megaUber").slideToggle( "slow" );
    });

    $('.mobile-menu #megaMenu #megaUber li a').on('click',function(event){
      console.log('first drop');
      event.stopPropagation();
      $(".mobile-menu #megaMenu #megaUber li")
        .not($(this).parent())
        .removeClass("active");
        $(this).parent().toggleClass("active");

    });

    $('.mobile-menu #megaMenu #megaUber li ul li a').on('click',function(event){
      console.log('second drop');
      event.stopPropagation();
      $("#megaUber li")
        .not($(this).parent())
        .removeClass("active");
        $(this).parent().toggleClass("active");

      $("#megaUber li ul li")
        .not($(this).parent())
        .removeClass("actives");
        $(this).parent().toggleClass("actives");
    });
});

Answer 1

好的，我有一個工作版本： Fiddle

解決方法：

$(function () {
    $('#megaUber').find('a').click(function (e) {
        e.stopPropagation();
        $(this).parent().toggleClass("active");
    });
});

而這部分CSS所需的actives變為active

.mobile-menu #megaMenu #megaUber > li > ul > li.active > a + ul {
    display: block !important;
}

這應該無限嵌套。

這是正在發生的事情：

jQuery查找具有正確ID的列表。 我刪除了其他選擇器文本，因為id在頁面上應該只存在一次，因此您在選擇器中不需要更具體。 一旦找到該元素，它將使用find()函數find()所有子元素，並將click()事件附加到所有元素。 這些單擊事件引用其上一級的parent()元素，並將active類放在其上。 打開菜單。

slideToggle位只是不能這樣工作。 如果您想要這種效果，則必須重新考慮整個過程。 我不會說的。

我不確定您要使用UberMenu做什么，我從未使用過。 但是您必須在html中包含鏈接，而不僅僅是<li>元素。