Question

我已经为nav-bar编写了此脚本，该脚本应充当切换按钮。第一次单击，它应该打开菜单，第二次单击，它应该关闭。

我不明白问题所在。

脚本：

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>

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

未捕获的TypeError：无法读取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>

网站响应导航栏的问题

1 个答案: