导航栏不在类之间切换答案

【问题标题】：Navigation bar not toggling between classes导航栏不在类之间切换
【发布时间】：2020-07-02 22:10:18
【问题描述】：

我正在尝试让导航栏响应，但我的汉堡菜单按钮似乎没有在 .ul 和 .show 类之间切换，显示错误 Uncaught TypeError: Cannot read property 'classList' of undefined。

我该如何解决这个问题？

有没有办法从顶部转换导航栏？

const btn = document.getElementById('bars');

btn.addEventListener('click', () => {
    document.getElementsByClassName('.ul')[0].classList.toggle('show');
});

<div class="navbar-links">
  <i class="fa fa-bars" id="bars"></i>
  <ul class="ul">
    <li><a href="#">Process</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

【问题讨论】：

不要在 getElementsByClassName 中使用 .

标签： javascript html css navbar

【解决方案1】：

试试这个：

const btn = document.getElementById('bars');

btn.addEventListener('click', () => {
    document.getElementsByClassName('navItems')[0].classList.toggle('show');
});

<div class="navbar-links">
  <i class="fa fa-bars" id="bars"></i>
  <ul class="navItems">
    <li><a href="#">Process</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

【讨论】：