javascript - jQuery关闭菜单自动关闭

Question

构建一个移动菜单，并希望当用户单击文档时，而不是菜单关闭菜单(如果其打开)。问题是，当第一次单击打开移动设备时，它会自动关闭。我正在努力让这一点发挥作用。

代码可以识别单击，因此窗口可以检测到正确的操作。我认为我只是错过了最后一步。

代码是:

$('.mobile-menu-button').click(function(e) {
    e.preventDefault();
    $('.mobile-menu').slideToggle('slow');
});
// close on off click
$(window).click(function(e){
    e.preventDefault();
    e.stopPropagation();
    if($('.mobile-menu').css("display") == 'block') {
        $('.mobile-menu').slideToggle();
        console.log('click');
    }
});

谢谢

Answer 1

您可以使用事件委托(delegate)。当您单击“.mobile-menu”时，您可以打开或关闭它，当您单击其他位置时，您只能将其关闭。

$(window).on('click', function(e){
    e.preventDefault();
    if ($(e.target).hasClass('mobile-menu-button')) {
      $('.mobile-menu').slideToggle('slow');
    } else {
      $('.mobile-menu').css('display') === 'block' && $('.mobile-menu').slideUp();
    }
});

这个 fiddle 的基本示例:https://jsfiddle.net/6e7atrmn/2/