Saludos a todos
Estoy tratando de crear un menu desplegable con listas, de manera que al hacer clic en una familia se despliegue su subfamilia y al hacer clic en la subfamilia se desplieguen sus determinadas subsubfamilias
Algo así
Código HTML:
Ver original <li>Subsubfamilia 1-1-1
</li> <li>Subsubfamilia 1-1-2
</li> <li>Subsubfamilia 1-1-3
</li> <li>Subsubfamilia 1-2-1
</li> <li>Subsubfamilia 1-2-2
</li> <li>Subsubfamilia 1-2-3
</li> <li>Subsubfamilia 2-1-1
</li> <li>Subsubfamilia 2-1-2
</li> <li>Subsubfamilia 2-1-3
</li> <li>Subsubfamilia 2-2-1
</li> <li>Subsubfamilia 2-2-2
</li> <li>Subsubfamilia 2-2-3
</li>
De manera que si hago clic en familia 2 se despliegue Subfamilia 2-1 y subfamilia 2-2. Y si hago clic en Subfamilia 2-2 se despliegue Subsubfamilia 2-1-1, 2-1-2 y 2-1-3.
Cada una de las subfamilias tiene display none y un id único. He añadido el siguiente código jquery
Código Javascript
:
Ver originalfunction cambia(nivel, padre){
$('#li'+nivel+padre+' a.expandir').html("-");
$('#li'+nivel+padre+' ul').show(400, function(){
$('#li'+nivel+padre+' ul ul').each(function(){
$(this).css('display','none');
});
});
}
Consigo que me funcione al primer nivel, pero cuando hago clic en el segundo me muestra y me oculta todo. Parece ser que como llamo a la función desde un evento onclick en el li, este se expande y llama tambien al evento clic del padre y por eso me oculta a los hijos.
¿Podeis echarme una mano con esto?
Muchas gracias por adelantado