Estoy tratando de crear un menú desplegable anidado con javascript y haga clic en evento. Mi html es este:
<ul> <li id="menu-item-439" class="dropdown"> <a href="#">hostelería</a> <ul class="sub-menu"> <li id="menu-item-459"> <a href="#">Comanderos</a> </li> <li id="menu-item-457" class="dropdown"> <a href="#">Venta online</a> <ul class="sub-menu"> <li> <a href="#">PortalRest Pedidos</a> </li> </ul> </li> </ul> </li> </ul>y mi javascript:
document.querySelectorAll('.dropdown').forEach(i => { i.addEventListener('click', (e) => { i.classList.toggle('show'); }) });El problema está en la clase "desplegable" anidada. Cuando hago clic en "desplegable secundario" (id="menu-item-457"), toogle no solo afecta ese elemento sino que también afecta al padre (id="menu-item-439")
¡¡Gracias!!
Aquí
HTML
<ul> <li id="menu-item-439" class="dropdown"> <a href="#" onclick="toggle()">hostelería</a> <ul class="sub-menu"> <li id="menu-item-459"> <a href="#">Comanderos</a> </li> <li id="menu-item-457" class="dropdown"> <a href="#" onclick="toggle2()">Venta online</a> <ul class="sub-menu"> <li> <a href="#">PortalRest Pedidos</a> </li> </ul> </li> </ul> </li> </ul>JS
let n=0, n2=0; function toggle() { n++; if (n%2==0) { document.getElementsByClassName("sub-menu")[0].style.display="none"; } else { document.getElementsByClassName("sub-menu")[0].style.display="block"; } } function toggle2() { n2++; if (n2%2==0) { document.getElementsByClassName("sub-menu")[1].style.display="none"; } else { document.getElementsByClassName("sub-menu")[1].style.display="block"; } }CSS
.sub-menu {display: none}Si quería lo mismo con el método de alternancia de JQuery, entonces js debería ser así
JS
function toggle() { document.getElementsByClassName("sub-menu")[0].toggle(); } function toggle2() { document.getElementsByClassName("sub-menu")[1].toggle(); }