javascript - Vanilla JS 类型错误 : Cannot read property

Question

我有一个带有 Logo 和导航的标题，其中有一个显示在较小视口(viewport)上的菜单切换链接。我尝试使用 Vanilla JS 来实现这一点，因为我想摆脱 jQuery。

当我单击菜单切换链接时，出现以下错误:Uncaught TypeError: Cannot read property 'className' of null at HTMLLIElement.<anonymous> (ignition.js:6) (anonymous) @ ignition.js:6

我目前正在学习 Vanilla JS，但在理解这意味着什么以及可能出现错误的位置时遇到了一些困难。

const navToggle = document.querySelector(".nav-toggle");

navToggle.addEventListener("click", (event) => {
    const navItem = event.currentTarget.querySelector(".nav-item");

    if (navItem.className.includes("active")) {
        navItem.className.remove("active");
        event.target.find("a").innerHTML("<i class='fas fa-bars'></i>");
    } else {
        navItem.className.add("active");
        event.target.find("a").innerHTML("<i class='fas fa-times'></i>");
    }
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">

<nav class="navbar">
  <div class="container">
    <ul class="nav-menu">
      <li class="nav-logo"><a href="#">🚀 Ignition <small>Beta</small></a></li>
      <li class="nav-item"><a href="#">Home</a></li>
      <li class="nav-item"><a href="#">Documentation</a></li>
      <li class="nav-item"><a href="#">Theme</a></li>
      <li class="nav-item"><a href="#">Blog</a></li>
      <li class="nav-toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
    </ul>
  </div>
</nav>

Answer 1

也许这里的代码可以实现您想要的:当单击“导航切换”图标时:

• 为所有导航项切换事件
• 导航切换的切换图标

const navToggle = document.querySelector(".nav-toggle");

navToggle.addEventListener("click", (event) => {
  // toggle icon
  const curIcon = document.querySelector('.nav-toggle a i')
  curIcon.classList.toggle('fa-bars')
  curIcon.classList.toggle('fa-times')

  // toggle active of nav-items
  const navItems = document.getElementsByClassName('nav-item')
  for (const navItem of navItems) {
    navItem.classList.toggle('active')
  }
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">

<nav class="navbar">
  <div class="container">
    <ul class="nav-menu">
      <li class="nav-logo"><a href="#">🚀 Ignition <small>Beta</small></a></li>
      <li class="nav-item"><a href="#">Home</a></li>
      <li class="nav-item"><a href="#">Documentation</a></li>
      <li class="nav-item"><a href="#">Theme</a></li>
      <li class="nav-item"><a href="#">Blog</a></li>
      <li class="nav-toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
    </ul>
  </div>
</nav>