为什么按钮 function 只能工作一次
[英]Why button function only works once
问题描述
我有侧边栏，如果我点击按钮，然后侧边栏从左边出现，当我点击身体侧边栏隐藏，但为什么它只发生一次。
HTML
<body>
<div class="site-overlay"></div>
<a href="#menu" class="menu-link"> button ☰</a>
<nav id="menu" class="panel" role="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">The Ballad of El Goodo</a></li>
<li><a href="#">Thirteen</a></li>
<li><a href="#">September Gurls</a></li>
<li><a href="#">What's Going Ahn</a></li>
</ul>
</nav>
</body>
JS：
$(document).ready(function() {
$('.menu-link').bigSlide({
easyClose: true
});
$('.menu-link').click(function() {
$('body').addClass('menu-open');
});
});
CSS：
a.menu-link {
float: right;
padding: 20px
}
nav#menu {
background: lightblue;
z-index: 100000000000000
}
.site-overlay {
display: none;
}
.menu-open .site-overlay {
display: block;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9998;
-webkit-animation: fade 500ms;
animation: fade 500ms;
}
我怎样才能让它工作多次，而不是一次。
4 个解决方案
解决方案1
3 已采纳 2021-11-17 09:08:44
单击后，您将显示您的叠加层，但由于它具有 z-index: 9998，因此叠加层被放置在按钮的顶部，因此当您尝试单击按钮时，您实际上是在单击叠加层，而不是按钮。
当单击覆盖以删除 class 时，您应该创建一个事件，如下所示：
$('.site-overlay').click(function() { $('body').removeClass('menu-open') })
解决方案2
0 2021-11-17 09:07:54
这是因为添加的 class 没有被删除。
您可以通过为该按钮添加切换值来控制它。
解决方案3
0 2021-11-17 09:10:33
而不是 addClass 放置切换。
在您放置的方式上，您将添加一次“菜单打开”，它永远不会被删除。
您可以在此处了解更多信息： https://www.w3schools.com/howto/howto_js_toggle_class.asp
解决方案4
0 2021-11-17 09:16:36
你可以通过这个 JS 代码来做到这一点。
$(document).ready(function() {
$('.menu-link').bigSlide({
easyClose: true
});
$('.menu-link').click(function() {
event.stopPropagation();
$('body').addClass('menu-open');
});
$('body').click(function(){
$('body').removeClass('menu-open');
})
});
function 仅在单击按钮时有效
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.