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