Jquery自动隐藏/关闭移动div导航菜单

Question

在移动设备上查看时，我目前有一个侧边主菜单，当单击其div之外时不会"自动关闭"。在JQuery方面，我完全是新手，找到了操纵菜单的代码。但是我不知道要更改什么才能使菜单在其div 之外单击时自动关闭。 菜单可以在这里找到，并在移动视图中看到。https://www.poupos.fr/dev/谢谢。

Js

// sidebar
$('.menu-button').on("click", function() {
if ($('body').hasClass('mobile-experience')) {
$("body").removeClass('mobile-experience');
} else {
$("body").addClass('mobile-experience');
}
navWorksWidth($(window).scrollTop());
});
// hidden container
$('.open-hidden-container').on("click", function() {
if ($('.hidden-container, .hidden-container-left').hasClass('open')) {
$(".hidden-container, .hidden-container-left").removeClass('open');
$(".hidden-container, .hidden-container-left").addClass('close');
} else {
$(".hidden-container, .hidden-container-left").removeClass('close');
$(".hidden-container, .hidden-container-left").addClass('open');
}
});

目录：

<div class="" id="header">     
<div class="logo">
<a href="#"></a>
</div>
<!-- menu bar start -->
<div class="" id="menu">
<!-- navigation start -->
<nav>
<ul class="nav">
<li>
<span class="navscroll tooltip link-underline" data-idpage="page-home">Home<sup class="box-tooltip">Home</sup></span>
</li>
<li>
<span class="navscroll tooltip link-underline" data-idpage="page-anna">About Anna<sup class="box-tooltip">About Anna</sup></span>
</li>
<li>
<span class="navscroll tooltip link-underline" data-idpage="page-lessons">Lessons<sup class="box-tooltip">Lessons</sup></span>
</li>
<li>
<span class="navscroll tooltip link-underline" data-idpage="page-media">Media<sup class="box-tooltip">Media</sup></span>
</li>
<li>
<span class="navscroll tooltip link-underline" data-idpage="page-contact">Contact<sup class="box-tooltip">Contact</sup></span>
</li>
</ul>
</nav>
<!-- navigation end -->  
</div>
<!-- menu bar end -->
<!-- mobile navigation button start -->
<div class="bt-mobile">
<div class="menu menu-button open">
<div class="icon"></div>
</div>
</div>
<!-- mobile navigation button end -->

Answer 1

您可以添加新功能单击父(菜单和内容(或仅单击内容

$('.page-home').on("click", function() {
if ($('body').hasClass('mobile-experience')) {
$("body").removeClass('mobile-experience');
} else {
$("body").addClass('mobile-experience');
}
navWorksWidth($(window).scrollTop());
});
// 

注意：你应该使用切换类更改添加类和删除类

Answer 2

摆弄之后，我做了这个，它有效！

// sidebar
$('.menu-button').on("click", function() {
if ($('body').hasClass('mobile-experience')) {
$("body").removeClass('mobile-experience');
} else {
$("body").addClass('mobile-experience');
}
navWorksWidth($(window).scrollTop());
});
$("html").click(function(e) {
if ($(e.target).closest('.menu-button').length == 0)
$("body").removeClass('mobile-experience');
});
//