多层下拉菜单切换不工作使用jquery

Question

首先让我告诉你，我对jquery有点弱，所以这里的帮助会让我学到很多关于jquery的知识。我试图用jquery扩展2级菜单，但唉，搜索谷歌一段时间后，我要在这里发布我的问题。所以我的问题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级的切换，但同时打开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}

这里是我写的jquery代码，这是为1级li &megaMenuTogglediv切换，但不用于第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

好的，我有一个工作版本:小提琴

解决办法:

$(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()函数查看它的所有子元素，并将click()事件附加到所有这些子元素上。这些点击事件引用它们的parent()元素，这只上一级，并将active类放在它们上面。打开你的菜单。

slideToggle位不是这样工作的。如果你想要那种效果，你就必须重新思考整个事情是如何运作的。我就不细讲了

我不知道你想用UberMenu做什么，我从来没用过。但是你必须在你的html中有链接，而不仅仅是<li>元素。