Foros del Web » Programando para Internet » Javascript »

Menus desplegables con listas

Estas en el tema de Menus desplegables con listas en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 31/03/2011, 01:39
 
Fecha de Ingreso: agosto-2004
Mensajes: 312
Antigüedad: 17 años, 10 meses
Puntos: 0
Menus desplegables con listas

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
  1. <ul>
  2.     <li>Familia 1</li>
  3.         <ul>
  4.             <li>Subfamilia 1-1</li>
  5.                 <ul>
  6.                     <li>Subsubfamilia 1-1-1</li>
  7.                     <li>Subsubfamilia 1-1-2</li>
  8.                     <li>Subsubfamilia 1-1-3</li>
  9.                 </ul>
  10.             <li>Subfamilia 1-2</li>
  11.                 <ul>
  12.                     <li>Subsubfamilia 1-2-1</li>
  13.                     <li>Subsubfamilia 1-2-2</li>
  14.                     <li>Subsubfamilia 1-2-3</li>
  15.                 </ul>
  16.         </ul>
  17.     <li>Familia 2</li>
  18.         <ul>
  19.             <li>Subfamilia 2-1</li>
  20.                 <ul>
  21.                     <li>Subsubfamilia 2-1-1</li>
  22.                     <li>Subsubfamilia 2-1-2</li>
  23.                     <li>Subsubfamilia 2-1-3</li>
  24.                 </ul>
  25.             <li>Subfamilia 2-2</li>
  26.                 <ul>
  27.                     <li>Subsubfamilia 2-2-1</li>
  28.                     <li>Subsubfamilia 2-2-2</li>
  29.                     <li>Subsubfamilia 2-2-3</li>
  30.                 </ul>
  31.         </ul>
  32. </ul>

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 original
  1. function cambia(nivel, padre){
  2. $('#li'+nivel+padre+' a.expandir').html("-");              
  3. $('#li'+nivel+padre+' ul').show(400, function(){
  4.                     $('#li'+nivel+padre+' ul ul').each(function(){
  5.                         $(this).css('display','none');                                       
  6.                     });
  7.                 });
  8. }

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

Etiquetas: desplegables, listas, menus
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:57.