Question

首先让我告诉你我在jquery中有点弱，所以在这里帮助我会让我学到很多关于jquery的知识。我试图使用jquery扩展2级菜单但是在搜索谷歌一段时间之后唉我会在这里发布我的问题。所以我的问题html骨架有点像下面之前我正在使用wp nav。

<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}

这里是我编写的jquery代码，它适用于1级和1级。 megaMenu切换div切换但不是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");
    });
});

这一点需要将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>元素。

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

1 个答案:

修复：

以下是发生的事情：