响应式导航栏（vanilla javascript）不起作用

【问题标题】：responsive navbar(vanilla javascript) not working响应式导航栏（vanilla javascript）不起作用
【发布时间】：2020-06-29 07:30:17
【问题描述】：

我正在制作响应式导航栏，但单击时没有响应。我绝对认为我的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>

【问题讨论】：

您的代码运行良好，您的问题是什么？
我认为最好考虑：stackoverflow.com/questions/68048470/…。我使用这个概念为网站构建了响应式导航栏：monicamp.com。你可以选择纯JavaScript或者jQuery方法来实现。

标签： javascript html css responsive-design navbar

【解决方案1】：

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

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

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

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

找到类navbar的第一个元素
如果还没有类show，请将其添加到它，或者删除 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>

【讨论】：