<input type="checkbox" id="menu-bars">
<label for="menu-bars" class="nav-button" id="nav-button">
<span></span>
<span></span>
<span></span>
</label>
<script>
const NavBtn = document.querySelector(".nav-button");
const NavShow = document.querySelector(".navbar");
NavBtn.addEventListener("click", function(){
NavShow.classList.toggle("slide");
})
document.onclick = function(e){
if(e.target.querySelector !== ".nav-button, input" && e.target.querySelector !== ".navbar")
{
NavShow.classList.remove("slide");
}
}
</script>
uj5u.com熱心網友回復：
我不太明白你的問題。你想隱藏元素嗎？如果是這樣，有很多方法。嘗試使用 hidden 屬性（最基本的屬性之一）：
let element = document.querySelector('.navbar')
window.onclick = () => {
let condition = ... // bool (true or false)
element.setAttribute('hidden', condition)
}
uj5u.com熱心網友回復：
嘗試這個
document.addEventListener('click', (event) => {
const isClickedOutside = !document.querySelector('.navbar').contains(event.target);
// Like @sum117 said
document.querySelector('.nav-button').setAttribute('hidden', isClickedOutside)
})
uj5u.com熱心網友回復：
不包含不完整的 HTML，.navbar所以我猜它包含了所有內容。我洗掉了該復選框，因為在這種型別的布局中并使用 JavaScript 會阻礙下拉選單。
為所有中性元素添加一個類——這意味著您可以單擊但沒有任何反應的元素。然后將點擊事件系結到document：
documnet.addEventListener('click', ...
任何有類.nav的東西什么都不做：
if (e.target.matches('.nav')) {
return;
}
如果單擊按鈕，則將其視為切換：
if (e.target.matches('.nav-button')) {
return NavShow.classList.toggle('slide');
}
如果單擊了其他任何內容，請關閉選單：
NavShow.classList.remove('slide');
請注意，將回傳前兩個條件。這樣做是使函式短路，這意味著它退出并且不會繼續到下一個條件。如果您希望<span>在單擊時關閉，只需.nav在 HTML 中洗掉它們的類。
const NavBtn = document.querySelector(".nav-button");
const NavShow = document.querySelector(".navbar");
document.addEventListener("click", function(e) {
const chx = document.querySelector('#menu-bars');
if (e.target.matches('.nav')) {
return;
}
if (e.target.matches('.nav-button')) {
return NavShow.classList.toggle('slide');
}
NavShow.classList.remove('slide');
}).navbar {
outline: 1px dashed green
}
.nav-button {
display: inline-block;
outline: 1px dashed blue
}
.nav-button span {
display: none;
outline: 1px dashed red;
}
.slide span {
display: block;
}<nav class='navbar nav'>
<label for="menu-bars" class="nav-button">Open<br>
<span class='nav'>1</span>
<span class='nav'>2</span>
<span class='nav'>3</span>
</label>
</nav>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/496310.html
標籤：javascript html css