点击外部区域关闭移动菜单
[英]Click outside area to close mobile menu
问题描述
I have two questions.
我有两个问题。
Q.1 Q.1
I have a WordPress website and I want the mobile menu to be closed if someone clicks outside the menu anywhere on the page.我有一个 WordPress 网站，如果有人在页面上任何位置的菜单外单击，我希望关闭移动菜单。
Currently, it works on the hamburger menu.目前，它适用于汉堡菜单。
Q.2 Q.2
This is a single-page website.这是一个单页网站。 If someone clicks on the menu it scrolls.如果有人点击菜单，它会滚动。
I want to add the behaviour if someone clicks on the mobile menu then it scrolls(it is working right now) and hide the menu (not working).如果有人点击移动菜单然后它滚动（它现在正在工作）并隐藏菜单（不工作），我想添加行为。
You can check the website link where I have the problem.您可以查看我遇到问题的网站链接。
https://www.dezigneronline.net/361apps/ https://www.dezigneronline.net/361apps/
Given below is the code:下面给出的是代码：
$(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');
});
});
1 个解决方案
解决方案1
0 2020-07-16 07:06:48
As mentioned in my comment, you need to handle a click on a parent that spans over the whole page to close the menu, that could be egthe body element.正如我在评论中提到的，您需要处理对跨越整个页面的父级的单击以关闭菜单，这可能是例如body元素。 The problem: your menu is a child of the body and therefore will trigger the event too.问题：您的菜单是 body 的子项，因此也会触发事件。 To prevent that you would need to stopPropagation();为防止这种情况发生，您需要stopPropagation(); on the menu element, so that the click event does not bubble up the DOM and reaches your body.在菜单元素上，以便单击事件不会冒泡 DOM 并到达您的身体。
Consider this simpliefied version to demonstrate the mechanic:考虑这个简化版本来演示机制：
$('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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.