如何以正确的方式使用查询选择器

Question

我希望导航栏<ul>在我单击它时消失。有了querySelectorAll()，我选择了导航栏中的所有<li>。然后我在其中添加了一个点击事件侦听器。因此，当我单击它时，它应该将导航栏<ul>的类切换为"活动"，然后消失。

它适用于切换按钮，但不适用于<li>s。

<i id="togglebtn" class="fas fa-bars"></i>
<nav class="navbar">
<div class="brand-title">brandName</div>
<div class="navbar-links">
<ul id="ul">
<li class="jsscrolltrigger"><a href="#logo">Start</a></li>
<li class="jsscrolltrigger"><a href="#Galerie">Galerie</a></li>
<li class="jsscrolltrigger"><a href="#Adresse">Anfahrt</a></li>
<li class="jsscrolltrigger"><a href="#Speisekarte">Speisekarte</>
</li>
</ul>
</div>
</nav>
<script type="text/javascript">
var togglebtn = document.getElementById("togglebtn");
togglebtn.addEventListener("click", function () {
ul.classList.toggle("active");
});
// this following part doesnt work //
// i want the ul(navbar) to disappear when i click it //
var a = document.querySelectorAll(".jsscrolltrigger");
var ul = document.getElementById("ul");
a.addEventListener("click", function () {
ul.classList.toggle("active");
});
</script>

Answer 1

querySelectorAll返回一个NodeList。您必须迭代列表并将事件侦听器添加到每个节点。

例如：

var togglebtn = document.getElementById("togglebtn");
togglebtn.addEventListener("click", function() {
ul.classList.toggle("active");
});

var nodeList = document.querySelectorAll(".jsscrolltrigger");
var ul = document.getElementById("ul");
nodeList.forEach(node => {
node.addEventListener("click", function() {
ul.classList.toggle("active");
});
})

<i id="togglebtn" class="fas fa-bars"></i>
<nav class="navbar">
<div class="brand-title">brandName</div>
<div class="navbar-links">
<ul id="ul">
<li class="jsscrolltrigger"><a href="#logo">Start</a></li>
<li class="jsscrolltrigger"><a href="#Galerie">Galerie</a></li>
<li class="jsscrolltrigger"><a href="#Adresse">Anfahrt</a></li>
<li class="jsscrolltrigger"><a href="#Speisekarte">Speisekarte</a></li>
</ul>
</div>
</nav>

Answer 2

当你使用Document.querySelectorAll()它不返回单个元素。它返回一个NodeList，您可以在该上调用forEach以循环遍历所有项目。

let a = document.querySelectorAll('.jsscrolltrigger');
let ul = document.getElementById("ul");
a.forEach(function(element) {
element.addEventListener('click', function(e){
e.preventDefault();
ul.classList.toggle("active");
});
});

.active {
border: 2px solid red;
}

<nav class="navbar">
<div class="brand-title">brandName</div>
<div class="navbar-links">
<ul id="ul">
<li class="jsscrolltrigger"><a href="#logo">Start</a></li>
<li class="jsscrolltrigger"><a href="#Galerie">Galerie</a></li>
<li class="jsscrolltrigger"><a href="#Adresse">Anfahrt</a></li>
<li class="jsscrolltrigger"><a href="#Speisekarte">Speisekarte</>
</li>
</ul>
</div>
</nav>

如果您不想使用forEach来执行循环，您可以通过将NodeList传递给Array.from()方法强制将其视为Array，该方法允许您对选定的元素执行任何数组操作

Array.from(a).map(function(){ /*...*/ });
Array.from(a).filter(function(){ /*...*/ });