Tengo un problema con un menú receptivo para un tamaño de pantalla <600 px. Quiero poder mostrar un submenú para cada elemento del menú haciendo clic en él. Eche un vistazo al código disponible en el enlace a continuación y verá que en la sección js, tengo un bucle for para agregar un eventListener en cada elemento del menú, pero dentro de eventListener mi variable de conteo (llamada i) siempre es igual a 6, por lo tanto, solo hay 6 elementos en el menú (por lo tanto, de 0 a 5).

 var menu = document.getElementById('pull'); var list = document.querySelector('ul.clearfix'); var item = document.querySelectorAll('.item'); var dropdown = document.querySelector(".dropdown"); window.addEventListener("DOMContentLoaded", (event) => { menu.addEventListener('click', function(){ list.classList.toggle('active'); }); for(var i = 0 ; i < item.length ; i++){ item[i].addEventListener('click', function(){ dropdown.classList.toggle('active'); }); } window.addEventListener('resize', function(){ if (window.matchMedia("(min-width: 480px)").matches) { if(list.style.display == "none"){ list.removeAttribute('style'); } } }); });

Esto significa que no puedo usar un querySelectorAll en mis submenús (clase = "desplegable") para mostrarlos porque el menú desplegable [6] no existe. Necesito hacerlo en raw js 😭 (y estoy luchando por encontrar una respuesta a mi problema 🥲) Aquí está el enlace de codepen https://codepen.io/raumain/pen/zYzXrwM