响应式导航栏（香草javascript）不工作

Question

我正在制作响应式导航栏，但在单击时没有响应。我绝对认为我的 javascript 在这里有问题。以下是：-

const bars = document.querySelector('#bars');

bars.addEventListener('click', () => {
  const nav = document.querySelector('.navbar');
  nav.classList.toggle('show');
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<nav>
  <ul class="navbar">
    <li> <a href="#">HOME</a> </li>
    <li> <a href="#">SERVICES</a> </li>
    <li> <a href="#">PRODUCTS</a> </li>
    <li> <a href="#">BLOG</a> </li>
    <li> <a href="#">CONTACT</a> </li>
  </ul>
  <i class="fa fa-bars" id="bars"></i>
</nav>

Answer 1

您的 JavaScript 可以正常工作，具体取决于随附的 HTML 和 CSS。这是您现有代码可以支持的 HTML 和 CSS 的示例。

如果将它与现有的进行比较，您应该能够看到在哪里更改 HTML/CSS（或您的脚本）以使它们按照您想要的方式协同工作。

顺便说一句，如果您还不清楚，您的脚本会说：

当用户点击id为bars的元素时...

找到第一个带有 class navbar
添加 class show 如果它还没有，或者删除 class show 如果它已经有了它。

const bars = document.querySelector('#bars');

bars.addEventListener('click', () => {
  const nav = document.querySelector('.navbar');
  nav.classList.toggle('show');
});

.navbar {
  display: none;
  width: 200px;
  height: 50px;
  background-color: blue;
}

.show {
  display: block;
}

<div>
  <button id="bars">Bars</button>
</div>
<div class="navbar"></div>

响应式导航栏（香草javascript）不工作

responsive navbar(vanilla javascript) not working

html

javascript

css

navbar

responsive-design