多级下拉菜单切换无法使用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>元素。