[英]jQuery - multi level menu for mobile
I need to make menu with multi-level sub menus for mobile. 我需要使菜单具有用于移动设备的多级子菜单。 This is dynamic menu, so I can not add more classes to html. 这是动态菜单,因此我无法向html添加更多类。 Menu is sliding down when I click on element which have child .sub-menu: 当我单击具有子.sub菜单的元素时,菜单正在向下滑动:
> ul.sub-menu
But when I want to click another (deeper) element in same node all this node menu is going to slideUp. 但是,当我想单击同一节点中的另一个(更深的)元素时,所有此节点菜单都将变为slideUp。
Here is my code: jsFiddle 这是我的代码: jsFiddle
For example: 例如:
First > 03 > (closing) > First > (03 is opened) > 03-02 > (closing) > First > 03 > (closing) > First > My node to element 03-02-02 is already opened. 首先> 03>(关闭)>首先>(03打开)> 03-02>(关闭)>首先> 03>(关闭)>首先>元素03-02-02的我的节点已经打开。
Thanks for advance for your help 感谢您的帮助
You can try to bind the click events to every a
(instead of li
) and find the submenu to slide up/down with siblings()
function. 您可以尝试将click事件绑定到每个a
(而不是li
),并找到子菜单以使用siblings()
函数向上/向下滑动。
You can also use slideToggle()
to open/close submenus. 您也可以使用slideToggle()
打开/关闭子菜单。 The click is prevented only if is present a sibling ul
. 仅当出现同级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();
});
Try using this to solve the issue 尝试使用它来解决问题
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();
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.