jQuery

Question

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

> ul.sub-menu

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

这是我的代码： jsFiddle

例如：

First > 03 > (closing) > First > (03 is opened) > 03-02 > (closing) > First > 03 > (closing) > First > 我的元素 03-02-02 的节点已经打开。

感谢您的提前帮助

FULL SOLUTION HERE: jsFiddle

Answer 1

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

您还可以使用 slideToggle() 到 open/close 子菜单。仅当存在同级 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 - 移动设备的多级菜单

jQuery - multi level menu for mobile

html

javascript

menu

slide