Question

我有两个问题。

Q.1

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

当前，它可以在汉堡菜单上使用。

第二季度

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

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

您可以在出现问题的地方查看网站链接。

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

Answer 1

如我的评论中所述，您需要对跨越整个页面的父项进行单击以关闭菜单，该菜单可能是Send completion emails to embedded signers元素。问题是：您的菜单是人体的一个子项，因此也会触发该事件。为避免这种情况，您需要在菜单元素上body，以使click事件不会冒泡DOM并到达您的身体。

请考虑以下简化版本以演示其机制：

stopPropagation();

$('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;
}

单击外部区域以关闭移动菜单

1 个答案: