单击链接后隐藏菜单 - HTML/JS

Question

我试图在点击 link 后制作一个隐藏的响应式菜单。当我点击第一个 link 时，它正在工作，但是当我点击另一个 link 菜单时，它并没有消失。我也试过 nava = document.querySelectorAll('.nav_links a');但是即使在点击第一个 link.

之后菜单也没有关闭

const navSlide = () => {
    const burger = document.querySelector('.nav_links_menu');
    const nav = document.querySelector('.nav_links');
    const nava = document.querySelector('.nav_links a');

    burger.addEventListener('click', () => {
        nav.classList.toggle('nav_active');
        //Burger Animation
        burger.classList.toggle('toggle');
    })

    nava.addEventListener('click', () => {
        nav.classList.toggle('nav_active');
        burger.classList.toggle('toggle');
    })
}

Answer 1

您必须绑定所有标签。你已经试过了：

nava = document.querySelectorAll('.nav_links a'.

然后你迭代了这个集合的每个元素并像这样添加事件监听器：

const navSlide = () => {
    const burger = document.querySelector('.nav_links_menu');
    const nav = document.querySelector('.nav_links');
    const nava = document.querySelectorAll('.nav_links a');

    nava.forEach(n => {
      n.addEventListener('click', (e) => {
        e.preventDefault();
        nav.classList.toggle('nav_active');
        burger.classList.toggle('toggle');
      })  
    })
    
}

navSlide();

.nav_active {
  background: green;
}

<div class="nav_links_menu">
  <div class="nav_links">
    <a href="nav_active">1</a>
    <a href="">2</a>
    <a href="">3</a>
  </div>
</div>

单击链接后隐藏菜单 - HTML/JS

Hidden menu after click on links - HTML/JS

html

javascript

navbar