我的移动菜单是通过 jQuery toggle() 函数打开/关闭的。除了能够通过再次单击用于打开它的相同汉堡包图标来关闭它之外，我还希望能够在它打开时通过单击屏幕上的任意位置来关闭它。然而，这种点击屏幕上的任何地方都会以下列方式“干扰”toggle() 功能:一旦菜单打开，如果我通过点击屏幕上的任何地方关闭它，然后再次点击移动菜单图标以打开它，它只在我第二次单击它时起作用(因为 toggle() 函数没有“知道”我通过单击屏幕关闭了菜单)。
如何解决这个问题？
JS:
$( '.header__menu_icon' ).toggle( function() {
$( '.wrap' ).removeClass( 'mobile_menu_opening mobile_menu_closing' );
$( '.wrap' ).addClass( 'mobile_menu_opening' );
}, function() {
$( '.wrap' ).removeClass( 'mobile_menu_opening mobile_menu_closing' );
$( '.wrap' ).addClass( 'mobile_menu_closing' );
});
$( document ).click(function() {
$( '.wrap' ).removeClass( 'mobile_menu_opening mobile_menu_closing' );
$( '.wrap' ).addClass( 'mobile_menu_closing' );
});
$( '.mobile_menu' ).click(function(event) {
event.stopPropagation();
});
HTML:
<body>
<div class='wrap'>
<div class='header'>
<div class='mobile_menu'>
...
</div>
</div>
</div>
</body>
CSS:
@keyframes mobile_menu_opening {
0% { transform: translateX(0px); }
100% { transform: translateX(-280px); }
}
@keyframes mobile_menu_closing {
0% { transform: translateX(-280px); }
100% { transform: translateX(0px); }
}
.mobile_menu_opening {
animation-name: mobile_menu_opening;
animation-duration: 2s;
}
.mobile_menu_closing {
animation-name: mobile_menu_closing;
animation-duration: 1s;
}
.wrap {
position: relative;
}
最佳答案
我会通过简单地避免切换功能来实现这一点。此外，您的代码可以通过以下方式优化:
function menuToggle() {
var openClass = 'mobile_menu_opening';
var closedClass = 'mobile_menu_closing';
var $wrap = $('.wrap');
if ($wrap.hasClass(openClass)) {
$wrap.removeClass(openClass);
$wrap.addClass(closedClass);
} else {
$wrap.removeClass(closedClass);
$wrap.addClass(openClass);
}
}
$('.header__menu_icon').on('click', function() {
menuToggle();
});
$(document).on('click', function() {
menuToggle();
});
$('.mobile_menu').on('click', function(event) {
event.stopPropagation();
});
关于javascript - 如何在屏幕上的任意位置单击关闭由 jQuery toggle() 函数控制的移动菜单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38210038/