Buenas: les consulto por lo siguiente: tengo una lista que puede contener n sublistas; quiero que al hacer click sobre algún elemento que tenga hijos, éstos se "escondan" o se muestren (
toogle). La estructura HTML correcta para este tipo de listas es la siguiente:
Código HTML:
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>SubItem 1</li>
<li>SubItem 2
<ul>
<li>SubSubItem 1</li>
</ul>
</li>
<li>SubItem 3</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul> Como se puede ver, las sublistas están contenidas en el elemento
LI del que son sublistas. El problema es que si yo hago click en el
SubItem 2 (por ejemplo) para "esconder" el
SubSubItem 1, al mismo tiempo que disparo el evento
onclick del
SubItem 2, disparo a la vez el evento
onclick del
Item 2, es decir del
parentNode e incluso de todos los "antecesores". Esto no es un error, es un efecto no deseado pero tiene sentido (así como en todos los casos estaría disparando el evento para el
body). La consecuencia de ello es que no sólo se oculta el ítem que quiero ocultar, sino todos sus antecesores, exceptuando el de mayor jerarquía.
La implementación la estoy haciendo en
jQuery, pero no viene al caso porque es un problema de javascript en sí mismo. ¿Alguna idea?. ¡Muchas gracias! ¡Suerte!
