我如何以正确的方式使用 querySelector [重复]

Question

我希望导航栏<ul> 在单击时消失。使用querySelectorAll()，我在导航栏中选择了所有<li>s。然后我添加了一个点击事件监听器。所以当我点击它时，它应该将导航栏<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，方法是将其传递给允许您执行任何数组操作的Array.from() 方法在选定的元素上

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