网站的响应式导航栏问题

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>

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

未捕获的类型错误：无法读取 null 的属性“classList” 在 HTMLDivElement。 (app.js:6)

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

Answer 1

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

document.querySelector('.nav-links')

见Class selectors。

此外，您正在绑定一个单击处理程序，该处理程序绑定另一个单击处理程序。结果是每次单击该元素时都会将一个新的处理程序绑定到该元素。我建议删除内联 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>