Estoy aprendiendo JavaScript en este momento (comencé hace 3 semanas en la universidad) y estoy luchando para crear un menú móvil en el que hagas clic y muestre u oculte un menú oculto.
El problema aquí es que JS solo apunta a la primera clase y no a todos. Y debe hacer clic dos veces para revelar el elemento que funciona.
Estaría muy agradecido por alguna orientación y, con suerte, una expiación que me ayude a comprender el problema.
Gracias
<script> const btn = document.querySelector('.navigation-main-mobile .menu-item-has-children'); const box = document.querySelector('.navigation-main-mobile .menu-item-has-children .sub-menu'); btn.addEventListener('click', function handleClick() { if (box.style.display === 'none') { box.style.display = 'block'; } else { box.style.display = 'none'; } }); </script> <ul id="menu-primary-menu" class="navigation-main-mobile"><li><a href="/">Text</a></li> <li class="menu-item-has-children"><a href="#">Text</a> <ul class="sub-menu"> <li><a href="http://1.io/1/1/">Text</a></li> <li><a href="http://1.io/2/2/">Text</a></li> <li><a href="http://1.io/3/3/">Text</a></li> </ul> </li> <li class="current-menu-item"><a href="/news/" aria-current="page"></a>Text</a></li> <li class="menu-item-has-children"><a href="#"></a>Text</a></li> <ul class="sub-menu"> <li><a href="http://1.io/4/">Text</a></li> <li><a href="http://1.io/5/">Text</a></li> <li><a href="http://1.io/6/">Text</a></li> <li><a href="/about/">Text</a></li> </ul> </li> </ul>Tienes que encontrar todos los nodos que coincidan con el selector. querySelectorAll se usa para eso. Luego debe recorrer todos los nodos y establecer el evento. Además, debe eliminar la etiqueta de cierre incorrecta <li> (que estropea el selector) después de </a>Text</a> en el segundo menu-item-has-children
const btns = document.querySelectorAll('.navigation-main-mobile .menu-item-has-children'); const boxs = document.querySelectorAll('.navigation-main-mobile .menu-item-has-children .sub-menu'); btns.forEach((btn, index) => { btn.addEventListener('click', function handleClick() { if (boxs[index].style.display === 'none') { boxs[index].style.display = 'block'; } else { boxs[index].style.display = 'none'; } })});.querySelector() devuelve el primer elemento que coincide con los valores pasados.
Tiene el problema del doble clic porque no ha establecido un valor para el atributo style.display . Cuando hace clic en él por primera vez, el navegador se dio cuenta de eso y estableció el atributo en none y luego el segundo clic realiza los cambios que codificó.
Recuerde ser algo explícito en lo que desea codificar y no asuma que la computadora completará nada por usted. ¡Buena suerte!