javascript - 网站响应式导航栏中的问题

Question

我已经为导航栏编写了这个脚本，它应该充当切换按钮。第一次点击时，它应该打开菜单，第二次点击它应该关闭。

我无法理解这个问题。

脚本:

const navSlide = () => {
  const togg = document.querySelector('.toggle');
  const navs = document.querySelector('nav-links');

  togg.addEventListener('click', () => {
    navs.classList.toggle('nav_ul_active');
  });
}

相关HTML代码:

<div class="toggle" onclick="navSlide()">
  <div class="menu"> <i class="fa fa-bars" aria-hidden="true"></i> </div>
</div>
<div class="nav-links">
  <ul class="nav_ul">
    <li><a href="#head-proj">Projects</a></li>
    <li><a href="#head-about">About</a></li>
  </ul>
</div>

现在，当我刷新我的网站并单击按钮时，会显示此错误:

Uncaught TypeError: Cannot read property 'classList' of null at HTMLDivElement. (app.js:6)

这里的 app.js 是我的 javascript 文件。这是什么错误，我应该如何清除它？

Answer 1

querySelector()需要一个 CSS 选择器字符串。使用点表示类名:

document.querySelector('.nav-links')

参见 Class selectors .

此外，您正在绑定(bind)一个点击处理程序，该点击处理程序绑定(bind)另一个点击处理程序。结果是每次单击该元素时都会将一个新的处理程序绑定(bind)到该元素。我建议删除内联 onclick 属性并依赖于 addEventListener。

const togg = document.querySelector('.toggle');
const navs = document.querySelector('.nav-links');

togg.addEventListener('click', () => {
  navs.classList.toggle('nav_ul_active');
});

.nav_ul_active {
  background-color: red;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="toggle">
  <div class="menu"><i class="fa fa-bars" aria-hidden="true"></i></div>
</div>
<div class="nav-links">
  <ul class="nav_ul">
    <li><a href="#head-proj">Projects</a></li>
    <li><a href="#head-about">About</a></li>
  </ul>
</div>