我有两个问题。
Q.1
我有一个WordPress网站，如果有人点击页面上菜单外的任何位置，我希望关闭移动菜单。
目前，它适用于汉堡菜单。
问题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');
});
});
正如我的评论中所提到的，您需要处理跨越整个页面的父级上的单击以关闭菜单，例如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>