我如何关闭导航栏时点击外部和链接

Question

<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>

Answer 1

HTML不完整，.navbar不包括在内，所以我猜它包含了所有内容。我删除了复选框，因为下拉菜单在这种布局和使用JavaScript时会受到阻碍。

将类添加到所有中性元素中，即可以单击但不会发生任何事情的元素。然后将click事件绑定到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>在单击时关闭，只需在HTML中删除.nav类。

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 class="nav-button">Open<br>
<span class='nav'>1</span>
<span class='nav'>2</span>
<span class='nav'>3</span>
</label>
</nav>

Answer 2

我不太明白你的问题。你是想隐藏元素吗?如果是这样的话，有很多方法。尝试使用隐藏属性(最基本的属性之一):

let element = document.querySelector('.navbar')
window.onclick = () => {
let condition = ... // bool (true or false)
element.setAttribute('hidden', condition)
}