Question

我试图使导航栏响应，但是我的汉堡菜单按钮似乎没有在类.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>

Answer 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>

导航栏不在类之间切换

1 个答案: