Foros del Web » Programando para Internet » Jquery »

Menu acordeón con listas anidadas (jquery)

Estas en el tema de Menu acordeón con listas anidadas (jquery) en el foro de Jquery en Foros del Web. Estoy intentando colocar un menu vertical desplegable estilo acordeón en mi web. El problema es que el menú incluye sublistas dentro de la lista principal ...
  #1 (permalink)  
Antiguo 28/05/2010, 02:54
Avatar de gorkreg  
Fecha de Ingreso: julio-2008
Mensajes: 305
Antigüedad: 11 años, 4 meses
Puntos: 8
Menu acordeón con listas anidadas (jquery)

Estoy intentando colocar un menu vertical desplegable estilo acordeón en mi web. El problema es que el menú incluye sublistas dentro de la lista principal y usando UI de Jquery no encontré el modo de que el acordeón funcione también en las sublistas.
Finalmente usé este código que encontré y funciona pero el problema es que el menú está cerrado por defecto. ¿Hay alguna forma de que una de las opciones quede abierta por defecto? No tengo ni idea de javascript (solo copiar-pegar y cambiar cuatro cosillas).

Código:
<script>
$(function() {
   $('#accordion ul').hide();
   $('#accordion li:has(ul)').children('a').click(function(event) {
      $(this).next().slideToggle();
      $('ul',$(this).parent().siblings()).slideUp();
      event.stopPropagation();
   });
});
</script>
Gracias
__________________
}8[/
  #2 (permalink)  
Antiguo 28/05/2010, 09:20
Avatar de gorkreg  
Fecha de Ingreso: julio-2008
Mensajes: 305
Antigüedad: 11 años, 4 meses
Puntos: 8
Respuesta: Menu acordeón con listas anidadas (jquery)

¿Alguien por ahí?
__________________
}8[/
  #3 (permalink)  
Antiguo 28/05/2010, 13:31
Avatar de gorkreg  
Fecha de Ingreso: julio-2008
Mensajes: 305
Antigüedad: 11 años, 4 meses
Puntos: 8
Respuesta: Menu acordeón con listas anidadas (jquery)

He conseguido lo que quería pero, como buen novato de javascript, supongo que habrá alguna manera mejor. Lo que he hecho es dar un nombre de clase al elemento lista de cada una de las tres secciones y colocar un código distinto para cada una de las páginas con lo que, por ejemplo, al entrar en "opcion-2", establezco "hide()" para las otras dos opciones y "show()" para "opcion-2". Como quiero que solo aparezca abierta la lista principal y no las sublistas, tengo que añadir otra línea para ocultarlas: $('#accordion ul li ul').hide();

Como digo, de javascript, ni idea. Me imagino que hay alguna forma de hacerlo sin añadir tanto código así que apreciaría si alguien me puede ayudar.

Código:
<script>
$(function() {
   $('.opcion-1 ul').hide();
   $('.opcion-2 ul').show();
   $('.opcion-3 ul').hide();
   $('#accordion ul li ul').hide();
   $('#accordion li:has(ul)').children('a').click(function(event) {
      $(this).next().slideToggle();
      $('ul',$(this).parent().siblings()).slideUp();
      event.stopPropagation();
   });
});
</script>
__________________
}8[/
  #4 (permalink)  
Antiguo 02/06/2010, 02:25
Avatar de gorkreg  
Fecha de Ingreso: julio-2008
Mensajes: 305
Antigüedad: 11 años, 4 meses
Puntos: 8
Respuesta: Menu acordeón con listas anidadas (jquery)

¿Alguna ayuda por ahí?
__________________
}8[/
  #5 (permalink)  
Antiguo 02/06/2010, 11:52
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 10 años, 8 meses
Puntos: 101
Respuesta: Menu acordeón con listas anidadas (jquery)

Tendrías que fijarte se tenes la opcion de comenzar el acordean abierto. Fijate en la API. Y en todo caso danos un enlace a la pagina del autor para que nos fijemos nosotros también.
  #6 (permalink)  
Antiguo 04/06/2010, 02:27
Avatar de gorkreg  
Fecha de Ingreso: julio-2008
Mensajes: 305
Antigüedad: 11 años, 4 meses
Puntos: 8
Respuesta: Menu acordeón con listas anidadas (jquery)

Gracias mavid. Encontré este código en una respuesta a un post de un foro luego no hay página de autor. El único código es este y el jquery.

Ahora, además, tengo un problema ñaddo que no he conseguidio resolver: quiero que una de las sublista de la sublista (#accordion ul li ul), por ejemplo "#accordion ul li .subopción1" quede abierta cuando me encuentre en esa subopción. ¿Alguna forma de conseguir esto?
__________________
}8[/

Etiquetas: anidadas, listas
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 18:33.