Estoy tratando de hacer un menú receptivo oculto después de hacer clic en los enlaces. Cuando hago clic en el primer enlace, funciona, pero cuando hago clic en otro enlace, el menú no desaparece. También probé nava = document.querySelectorAll('.nav_links a'); pero luego el menú no se cerró incluso después de hacer clic en el primer enlace.
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'); }) }Tienes que enlazar todas las etiquetas. Y ya lo intentaste:
nava = document.querySelectorAll('.nav_links a' .
Luego, debe iterar cada elemento de esta colección y agregar un detector de eventos así:
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>