在网站上单击任意位置时隐藏移动菜单

Question

我有一个问题，我想在点击网站的任何地方时隐藏菜单，但对我来说什么都不起作用：(这是我关闭按钮的代码：

$('.menu-toggle').on('click',function(e){
e.preventDefault();
if ( $('.lang-mobile').hasClass('is-open') ){
$('.lang-mobile a').trigger('click')
}
if ( !$('header').hasClass('is-open')){
$('header').addClass('is-open');
$('#navbar-main').fadeIn();
}
else {
$('header').removeClass('is-open');
$('#navbar-main').fadeOut();
}

以下是我的一些HTML结构

<header class="header clear is-open" role="banner">
<div class="navbar" id="navbar-main" style="display: block;">
<div class="navbar-container" style="height: 797px;">
<div class="navbar-item">

我试过这种

$(document).click(function() {
var container = $("#navbar-main");
if (!container.is(event.target) && !container.has(event.target).length) {
container.hide();
}
});

它不起作用，你能帮帮我吗？这里有什么不正确的地方？

Answer 1

这个片段处理两种情况。

• 每次点击页面时，它都会检查页眉是否打开并关闭
• 每次单击.菜单切换项时，都会打开或关闭标题

<script>
$(document).on('click', function() {
var header = $(".header");
if ( header.hasClass('is-open') ) {
header.fadeOut();
header.removeClass('is-open');
}
});
$('.menu-toggle').on('click', function() {
var header = $(".header");
if ( !header.hasClass('is-open') ) {
header.fadeIn();
header.addClass('is-open');
} else if ( header.hasClass('is-open') ) {
header.fadeOut();
header.removeClass('is-open');
}
});
</script>

Answer 2

谢谢Youssouf Oumar分享这个链接作为答案-移动菜单-点击外部菜单关闭菜单这是唯一对我有用的东西！我只在这个代码中添加了一些需要的部分，所以如果有人喜欢我，需要更多细节，请点击这里：D

$(document).mouseup(function(e){
var header = $ (".header, .lang-mobile"); //I have two toggle menus with class that collapse navbars, I also have animation on toggle button that's why I need them also to work
var menu = $(".navbar, .dropdown");//this is to hide menus 
if (!menu.is(e.target) // The target of the click isn't the container.
&& menu.has(e.target).length === 0) // Nor a child element of the container
{
header.removeClass('is-open');
menu.hide(); 
}
});