javascript - Vanilla JS TypeError：无法读取属性

Question

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

当我单击菜单切换链接时，出现此错误：未捕获的类型错误：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>

标签： javascripthtmltypescript

Answer 1

也许这是实现您想要的代码：单击“导航切换”图标时：

• 切换active所有导航项
• 导航切换的切换图标

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>