Hidden menu after click on links - HTML/JS

Question

I'm trying to make a hidden responsive menu after clicking on links. When I click on the first link it's working but when I click on another link menu doesn't disappear. I was also tried nava = document.querySelectorAll('.nav_links a'); but then menu didn't close even after clicking on the first 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');
    })
}

user_14807111 · Answer

You have to bind all tags. And you already tried that:

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

Then you have iterate every element of this collection and add event listener like that:

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;
}

Hidden menu after click on links - HTML/JS

1 Answers