Question

我需要为移动设备制作带有多级子菜单的菜单。这是动态菜单，所以我无法向html添加更多类。当我点击有子项的元素时菜单向下滑动。子菜单：

> ul.sub-menu

但是当我想要点击同一节点中的另一个（更深层）元素时，所有这个节点菜单都会进行slideUp。

这是我的代码： jsFiddle

例如：

首先＆gt; 03＆gt; （结束）＆gt;首先＆gt; （03打开）＆gt; 03-02＆gt; （结束）＆gt;首先＆gt; 03＆gt; （结束）＆gt;首先＆gt;我的元素03-02-02的节点已经打开。

感谢您提前寻求帮助

完整的解决方案： jsFiddle

Answer 1

您可以尝试将点击事件绑定到每个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();
});

Answer 2

尝试使用它来解决问题

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();
        }
    });

jQuery - 移动的多级菜单

2 个答案: