移动导航点击出jquery

Mobile navigation click out jquery

本文关键字：jquery 击出 导航 移动      更新时间：2023-09-26

我有一个功能，当用户点击移动导航的外部关闭移动菜单。我不认为我已经得到了正确的代码，因为当我点击移动菜单，它打开和关闭直接。我想要发生的是当用户在导航栏外点击时slideToggle菜单返回

当前代码为:

    // 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有关的地方，但是我没有在可用的参数中看到鼠标点击。

谢谢

我可以给你一个更简洁的方法。窗口的监听器只应该在菜单展开后绑定。当它崩溃时，应该删除侦听器。这将避免由于异步执行两个事件侦听器而产生的许多麻烦和可能的错误。考虑到这一点:

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

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

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

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

问题是，当您在.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');
    }
});
相关文章：