时间戳

首页 > 解决方案 > 点击外部区域关闭移动菜单

javascript - 点击外部区域关闭移动菜单

问题描述

我有两个问题。

Q.1

我有一个 WordPress 网站，如果有人在页面上任何位置的菜单外单击，我希望关闭移动菜单。

目前，它适用于汉堡菜单。

Q.2

这是一个单页网站。如果有人点击菜单，它会滚动。

如果有人点击移动菜单然后它滚动（它现在正在工作）并隐藏菜单（不工作），我想添加行为。

您可以查看我遇到问题的网站链接。

https://www.dezigneronline.net/361apps/

下面给出的是代码：

$(document).ready(function () {

    /* =================
     Menu Mobile
     =================== */
    $('.ct-main-navigation li.menu-item-has-children').append('<span class="ct-menu-toggle far fac-angle-right"></span>');
    $('.ct-menu-toggle').on('click', function () {
        $(this).toggleClass('toggle-open');
        $(this).parent().find('> .sub-menu, > .children').toggleClass('submenu-open');
        $(this).parent().find('> .sub-menu, > .children').slideToggle();
    });

    /* =================
     Menu Popup
     =================== */
    $('.ct-main-menu-popup li.menu-item-has-children > a').after('<span class="ct-menu-toggle"></span>');
    $('.ct-main-menu-popup .ct-menu-toggle').on('click', function () {
        $(this).toggleClass('toggle-open');
        $(this).parent().find('> .sub-menu, > .children').toggleClass('submenu-open');
        $(this).parent().find('> .sub-menu, > .children').slideToggle();
    });
    $('.ct-menu-popup').on('click', function () {
        $('body').addClass('ov-hidden');
        $(this).parents('body').find('.ct-header-popup-wrap').toggleClass('open');
    });
    $('.ct-menu-close').on('click', function () {
        $('body').removeClass('ov-hidden');
        $(this).parents('body').find('.ct-header-popup-wrap').toggleClass('open');
    });
    
    $("#ct-menu-mobile .open-menu").on('click', function () {
        $(this).toggleClass('opened');
        $('.ct-header-navigation').toggleClass('navigation-open');
    });

    $(".ct-menu-close").on('click', function () {
        $(this).parents('.header-navigation').removeClass('navigation-open');
        $('.ct-menu-overlay').removeClass('active');
        $('#ct-menu-mobile .open-menu').removeClass('opened');
        $('body').removeClass('ov-hidden');
    });

    $(".ct-menu-overlay").on('click', function () {
        $(this).parents('#header-main').find('.header-navigation').removeClass('navigation-open');
        $(this).removeClass('active');
        $('#ct-menu-mobile .open-menu').removeClass('opened');
        $('.header-navigation').removeClass('navigation-open');
        $('body').removeClass('ov-hidden');
    }); 
});

标签： javascriptjquerymobilemenutoggle

解决方案

正如我在评论中提到的，您需要处理对跨越整个页面的父级的单击以关闭菜单，这可能是例如body元素。问题：您的菜单是 body 的子项，因此也会触发事件。为了防止你需要 stopPropagation();在菜单元素上，这样点击事件就不会冒泡 DOM 并到达你的身体。

考虑这个简化版本来演示机制： 

$('body').not('.menu').on('click', function(){
    $('.menu').hide();
});

$('.menu').on('click', function(e){
    e.stopPropagation();
});
body , html{
  height: 100%;
  padding: 0;
  margin:0;
}

.menu{
  width: 20%;
  height: 100%;
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="menu"></div>
</body>

推荐阅读