jQuery - 移动设备的多级菜单答案

【问题标题】：jQuery - multi level menu for mobilejQuery - 移动设备的多级菜单
【发布时间】：2015-06-07 10:59:58
【问题描述】：

我需要为移动设备制作带有多级子菜单的菜单。这是动态菜单，所以我不能向 html 添加更多类。当我单击具有子 .sub-menu 的元素时，菜单正在向下滑动：

> ul.sub-menu

但是当我想点击同一个节点中的另一个（更深的）元素时，所有这个节点菜单都会向上滑动。

这是我的代码： jsFiddle

例如：

First > 03 > (关闭) > First > (03 打开) > 03-02 > (关闭) > First > 03 > (关闭) > First > 我的节点到元素 03-02-02 已经打开。

感谢您的帮助

这里有完整的解决方案： jsFiddle

【问题讨论】：

您可以在点击时停止传播
但是怎么做呢？
那么，您想弄清楚如何让子菜单项向下滑动？

标签： javascript jquery html menu slide

【解决方案1】：

尝试使用它来解决问题

var test1 = $( '#menu-mobile-slide ul.menu li' );
    test1.on( 'click', function(e) {
        e.preventDefault();

        var mobileMenu = $(e.target).parent().find( '> ul.sub-menu' );
        if( mobileMenu.css('display') == 'none' ) {
            mobileMenu.slideDown();
            e.stopPropagation();
        } else {
            mobileMenu.slideUp();
            e.stopPropagation();
        }
    });

【讨论】：

非常感谢，但现在链接例如：First > 03 > 03-01 is not working :( jsFiddle

【解决方案2】：

您可以尝试将点击事件绑定到每个a（而不是li）并找到子菜单以使用siblings()功能向上/向下滑动。

您也可以使用slideToggle() 打开/关闭子菜单。仅当存在同级 ul 时才会阻止单击。

var test1 = $('#menu-mobile-slide li > a');
test1.on('click', function(e) {
    var mobileMenu = $(this).siblings('ul');
    if (mobileMenu.length > 0) {
      e.preventDefault();
    }
    mobileMenu.slideToggle();
});

【讨论】：