菜单在外部单击时会关闭，但只打开一次

Question

我创建了一个可折叠的菜单，我希望它在用户单击主体时关闭。我已经对它进行了编码，但每次刷新时它只工作一次。我的意思是，当我点击菜单按钮时，它会打开，当我单击主体时，它很好地关闭，但如果我想重新打开菜单，按钮什么都不做。

我尝试了addclass而不是toggleclass，但它不起作用。即使我尝试了toggleClass而不是removeClass，但更糟糕的事情发生了，每次我点击BODY，菜单都会打开和关闭。

怎么了？

$(window).click(function() {
"use strict";
$("HTML, body").click(function() {
$(".menu").removeClass("menu_slide");
});
});
$(document).ready(function() {
"use strict";
$(".menu_button").click(function() {
$(".menu").toggleClass("menu_slide");
});
});

.menu_button {
position: fixed;
cursor: pointer;
color: #727272;
/*margin-top: -10vw;*/
margin-left: 3vw;
margin-top: 3vw;
text-shadow: 2px 1.5px 2px #0C0C0C;
z-index: 200;
}
.slash {
font-family: 'Montserrat-Medium';
font-size: 4vw;
letter-spacing: 0.5vw;
text-shadow: 2px 1.5px 2px #0C0C0C;
z-index: 200;
-webkit-transition: 0.3s ease-out;
-moz-transition: 0.3s ease-out;
-o-transition: 0.3s ease-out;
transition: 0.3s ease-out;
}
.menu {
width: 50vw;
height: 100vh;
background-color: #D1D1D1;
z-index: 10;
position: fixed;
left: -50vw;
top: 0vh;
-moz-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
-webkit-transition: 0.8s ease-in-out;
transition: 0.8s ease-in-out;
}
.menu_slide {
left: 0vw;
-moz-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
-webkit-transition: 0.8s ease-in-out;
transition: 0.8s ease-in-out;
}
.menu ul {
position: absolute;
left: 20vw;
top: 18vw;
}
.menu ul li {
font-family: 'Montserrat-Light';
font-size: 1.5vw;
line-height: 2vw;
letter-spacing: 0.3vw;
color: #1C1C1C;
cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu_button">
<div class="slash">///</div>
</div>
<div class="menu">
<ul>
<li>About /</li>
<li>CV /</li>
<li>Photos /</li>
<li>Videos /</li>
<li>Contact /</li>
</ul>
</div>

Answer 1

问题是因为对.menu元素的点击会传播到body，在那里您刚刚添加的类会立即被删除。window.click中的嵌套事件处理程序也在做类似的工作，这就是为什么通常应该避免使用嵌套的事件处理程序。

要解决此问题，需要向菜单的父元素添加stopPropagation()调用。您还应该只将隐藏菜单的第一次单击处理程序直接附加到document上。试试这个：

$(document).click(function() {
$(".menu").removeClass("menu_slide");
});
$(document).ready(function() {
$(".menu_button").click(function() {
$(".menu").toggleClass("menu_slide");
});

$('.menu-container').on('click', function(e) {
e.stopPropagation();
});
});

.menu_button {
position: fixed;
cursor: pointer;
color: #727272;
/*margin-top: -10vw;*/
margin-left: 3vw;
margin-top: 3vw;
text-shadow: 2px 1.5px 2px #0C0C0C;
z-index: 200;
}
.slash {
font-family: 'Montserrat-Medium';
font-size: 4vw;
letter-spacing: 0.5vw;
text-shadow: 2px 1.5px 2px #0C0C0C;
z-index: 200;
-webkit-transition: 0.3s ease-out;
-moz-transition: 0.3s ease-out;
-o-transition: 0.3s ease-out;
transition: 0.3s ease-out;
}
.menu {
width: 50vw;
height: 100vh;
background-color: #D1D1D1;
z-index: 10;
position: fixed;
left: -50vw;
top: 0vh;
-moz-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
-webkit-transition: 0.8s ease-in-out;
transition: 0.8s ease-in-out;
}
.menu_slide {
left: 0vw;
-moz-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
-webkit-transition: 0.8s ease-in-out;
transition: 0.8s ease-in-out;
}
.menu ul {
position: absolute;
left: 20vw;
top: 18vw;
}
.menu ul li {
font-family: 'Montserrat-Light';
font-size: 1.5vw;
line-height: 2vw;
letter-spacing: 0.3vw;
color: #1C1C1C;
cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-container">
<div class="menu_button">
<div class="slash">///</div>
</div>
<div class="menu">
<ul>
<li>About /</li>
<li>CV /</li>
<li>Photos /</li>
<li>Videos /</li>
<li>Contact /</li>
</ul>
</div>
</div>