手机导航点击jquery

Question

我有一个功能，当用户在移动导航之外点击时会关闭移动菜单。我不认为我有正确的代码，因为当我单击移动菜单时，它会立即打开和关闭。 我想要发生的是当用户在导航幻灯片之外单击时将菜单切换回来。

当前代码是：

    // Responsive menu
$('.mobile-menu').click(function(e) {
    e.preventDefault();
    $('nav').slideToggle('slow');
});
// Close out the menu on click outside
window.addEventListener('mouseup', function(event) {
    var box = document.getElementById('nav');
    if(event.target != box && event.target.parentNode != box) {
        $('nav').slideToggle('slow');
    }
});

我认为它与 mouseup 有关，但是我在可用参数中没有看到鼠标点击。

谢谢

Answer 1

我可以为您提供一种更简洁的方法。 窗口的监听器只能在菜单展开后绑定。当它被折叠时，监听器应该被移除。这将防止由于 2 个事件侦听器的异步执行而导致的很多麻烦和可能的错误。 考虑到这一点：

// First we define a callback function to be called after the nav complete showing, which will close the nav when a user tap outside.
var bindEventListener = function(event) {
    var box = document.getElementById('nav');
    if(event.target != box && event.target.parentNode != box) {
        $('nav').slideUp('slow', function(){
            // remove the window's event listener after the nav is closed
            window.removeEventListener('mouseup', bindEventListener);
        });
    }
});

// Now we set the button's onclick event and bind the above defined callback for mouseup event.
$('.mobile-menu').click(function(e) {
    e.preventDefault();
    $('nav').slideDown('slow', function(){
        window.addEventListener('mouseup', bindEventListener);
    });
});

Answer 2

点击事件的目标不一定是nav 或者它的第一级子级，所以如果nav 上有点击事件，你会将它滑动打开然后滑动关闭。

您需要检查nav 是否包含目标元素或等于它，因此在事件侦听器中，将您的条件更改为：

if(!(event.target == box || $.contains(box, event.target))) {
  ...

Answer 3

问题是当你在.mobile-menu 上mousedown 时它会显示nav，然后当你在nav 之外的任何东西上mouseup 时，包括.mobile-menu，它会再次隐藏nav。您应该检查点击事件的目标也不是.mobile-menu。试试下面的代码：

// Responsive menu
$('.mobile-menu').click(function(e) {
    e.preventDefault();
    $('nav').slideToggle('slow');
});
// Close out the menu on click outside
$(window).on('mouseup', function(event) {
    if(!$(event.target).is("nav") && $.contains(event.target, $("nav")) && !$(event.target).is('.mobile-menu')) {
        $('nav').slideToggle('slow');
    }
});