好的,所以我有这个控制菜单打开/关闭的脚本....
在三个主要功能中(见下文),前两个效果很好,因为按钮切换将其类(变为 X)“激活”,使其成为 X。
然而,第四个(注释掉的)功能不起作用...它的设计目的是当您在菜单打开时单击正文或菜单以外的任何地方时,它将关闭。请有人帮我重写最后一个函数,让它工作。
$(document).ready(function () {
var $navToggle = $('.nav-toggle');
$(".navbtn").click(function () {
if($navToggle.hasClass('active')){
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
$(this).addClass('active');
}
else{
$('#menu').multilevelpushmenu('expand');
$navToggle.addClass('active');
$(this).removeClass('active');
}
});
$(".navbtn").hover(function () {
$('.nav-toggle').addClass('hover');
},function(){
$('.nav-toggle').removeClass('hover');
});
/*$('body').on('click', function(e){
if( !$(this).closest('#menu, .navbtn, .nav-toggle').length) {
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
e.stopPropagation();
};
});*/
});
我在下面提供了一个 JSFiddle(菜单设置为启动时完全折叠,而不是像演示中那样打开 fyi)
最佳答案
使用 e.target
而不是 this
,因为 this
指的是 body 而不是当前点击的元素。
The DOM element that initiated the event.
$('body').on('click', function (e) {
if (!$(e.target).closest('#menu, .navbtn, .nav-toggle').length) {
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
e.stopPropagation();
};
});
关于javascript - 使用 JQuery 打开关闭菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30572153/