网站响应式导航栏的问题

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>

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

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

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

Answer 1

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

document.querySelector('.nav-links')

请参阅类选择器。

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