手机导航点击jquery

问题描述：

我有一个功能，当用户点击移动导航之外关闭移动菜单。我不认为我的代码是正确的，因为当我点击它打开并直接关闭的移动菜单时。我想要发生的事情是，当用户在导航条之外单击时滑动菜单。手机导航点击jquery

当前的代码：

// 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'); 
    } 
});

我认为这是地方与鼠标松开做，但是我没有看到一个鼠标点击中的可用参数。

感谢

答

的问题是，当你mousedown上.mobile-menu它显示了nav，那么当你mouseup在nav之外的任何内容，包括.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'); 
    } 
});

无论我点击它切换的导航下车窗。 – Jolen

@Jolen更新后，立即尝试。 –

现在，当您在导航栏外单击时，代码不会切换 – Jolen

答

我可以给你一个更清洁的方法来做到这一点。窗口的侦听器只能在菜单展开后绑定。当它折叠时，应该删除监听器。这将防止由于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); 
    }); 
});

任何地方我在窗口中单击，都会切换导航栏。 – Jolen

答

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

您需要检查nav包含目标元素或等于它，因此事件监听器里，改变你的条件是：

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

手机导航点击jquery

相关推荐