我有側邊欄，如果我點擊按鈕，然后側邊欄從左邊出現，當我點擊身體側邊欄時，側邊欄隱藏，但為什么它只發生一次。
小提琴
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;
}
我怎樣才能讓它多次運行，而不是只運行一次。
uj5u.com熱心網友回復：
單擊后，您將顯示您的疊加層，但由于它具有 z-index: 9998，因此疊加層被放置在按鈕的頂部，因此當您嘗試單擊該按鈕時，您實際上是在單擊了疊加層，而不是在按鈕。
您應該在單擊疊加層以洗掉該類時創建一個事件，如下所示：
$('.site-overlay').click(function() { $('body').removeClass('menu-open') })
uj5u.com熱心網友回復：
這是因為添加的類沒有被洗掉。
您可以通過為該按鈕添加切換值來控制它。
uj5u.com熱心網友回復：
而不是 addClass 把切換。
在您放置的方式中，您將添加一次“選單打開”，并且永遠不會被洗掉。
您在此處了解更多資訊：https : //www.w3schools.com/howto/howto_js_toggle_class.asp
uj5u.com熱心網友回復：
你可以通過這個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');
})
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/358414.html
標籤：javascript css