Estoy creando una navegación desplegable para dispositivos móviles y estoy usando una clase activa para ocultar y mostrar submenús a través de CSS. El siguiente código funciona para el elemento de la lista inicial, pero cierra el elemento principal tan pronto como intento abrir un elemento de la lista secundaria en el submenú (que usa la misma estructura y clases)
lo que creo que está pasando
Creo que el problema es que tan pronto como hago clic dentro del li principal, js registra el evento de clic y se cierra a través de la palanca.
Problema
Entonces, ¿cómo obtengo el javascript para seleccionar el enlace secundario y adjuntar el evento de clic a eso, pero aún así agregar la clase activa al elemento li principal para que el CSS caiga en cascada a través de los submenús?
HTML:
<ul> <li class="menu-item-has-children nav-level-0"> <a class="#">Child link</a> <ul class="submenu"></ul> </li> <li class="menu-item-has-children nav-level-0"> <a class="#">Child link</a> <ul class="submenu"></ul> </li> </ul>JavaScript:
var nav_link = document.querySelectorAll(".menu-item-has-children"); for (var i = 0; i < nav_link.length; i++) { nav_link[i].addEventListener("click", function() { this.classList.toggle('active'); }); }Entonces, ¿cómo obtengo el javascript para seleccionar el enlace secundario y adjuntar el evento de clic a eso, pero aún así agregar la clase activa al elemento
liprincipal para que el CSS caiga en cascada a través de los submenús?
Prueba esto
var nav_link = document.querySelectorAll(".menu-item-has-children"); for (var i = 0; i < nav_link.length; i++) { nav_link[i].querySelector('a').addEventListener("click", function () { this.parentElement.classList.toggle('active'); }); }Estoy escribiendo esto como una solución cruda. Tal vez puedas implementar esto usando un foreach. Sin embargo, el problema al que se enfrenta se debe al burbujeo de eventos. Debe detener el clic realizado en el submenú para propagar al padre (lo que activa la alternancia de la clase activa, por lo tanto, oculta el elemento.
Agregue esto a su javascript
var submenu = document.querySelectorAll(".submenu"); for (var i = 0; i < submenu.length; i++) { submenu[i].addEventListener("click", function(event) { event.stopPropagation() }); }Sin embargo, esta solución no agrega/elimina la clase activa al submenú, en caso de que tenga que expandir eso. Sugiero usar una clase de selector común para hacer eso