2008-12-19 22 views
10

He creado una serie de acordeones en una página usando el plugin jQuery acordeón para que pueda aplicar expandir todo y contraer toda la funcionalidad.jQuery acordeón Cerrar Abrir continuación

Cada elemento de identificación es su propio acordeón y el código de abajo funciona para cerrar todos ellos, no importa cuáles ya están abiertas:

$("#contact, #address, #email, #sales, #equipment, #notes, #marketingdata") 
    .accordion("activate", -1) 
; 

Mi problema es con el original en inglés. Cuando tengo a todos expandirse con este código:

$("#contact, #address, #email, #sales, #equipment, #notes, #marketingdata") 
    .accordion("activate", 0) 
; 

Algunos contrato de voluntad y algunos se ampliará en función de si son o no previamente abierta.

Mi idea para corregir esto era colapsarlas todas y luego expandirlas todas cuando se hizo clic en expandir todo. Este código sin embargo, no se ejecutará correctamente:

$("#contact, #address, #email, #sales, #equipment, #notes, #marketingdata") 
    .accordion("activate", -1) 
; 
$("#contact, #address, #email, #sales, #equipment, #notes, #marketingdata") 
    .accordion("activate", 0) 
; 

Sólo se llegará a la segunda orden y no cerrarlos todos de primera. ¿Alguna sugerencia?

Respuesta

32

no estoy exactamente seguro de lo que está buscando, pero esta es mi mejor conjetura. De todos sus acordeones, desea que el botón "abrir todo" abra todos los acordeones que están cerrados (es decir, no se muestra ninguna sección). Que haría que mediante el uso filter()

$("#contact, #address, #email, #sales, #equipment, #notes, #marketingdata") 
    .filter(":not(:has(.selected))") 
    .accordion("activate", 0) 
; 

Es eso lo que buscabas?


Editar para explicar que la función de filtro:

La función de filtro sólo se ejecuta la selección actual a través de un filtro, eliminando todo lo que no coincide. Tiene dos formas diferentes: una donde pasa una consulta jQuery regular, como hice anteriormente, y la otra donde puede definir una función para filtrar. Si la función devuelve falso, entonces ese elemento se elimina.

En este caso, la consulta elimina todo lo que no (:not) tenga (:has) un hijo con clase "seleccionada" (.selected). Usé el selector .selected aquí porque eso es lo que agrega el acordeón al panel abierto actualmente.

Si solo tenía un acordeón, o le daba a cada uno de sus acordeones algún tipo de identificador, como un nombre de clase, entonces podría reducir mucho el guión completo. Digamos que para cada elemento que desea convertir en acordeón, le da la clase "acuerdo".

$(".accord:not(:has(.selected))").accordion("activate", 0); 

Esto es mucho más legible y fácil de mantener, ya que se puede agregar fácilmente más acordeones en el futuro si lo desea y esto va a manejar la situación.

La documentación para el filtro está aquí: http://docs.jquery.com/Traversing/filter

+0

Wow! ¡Eso es perfecto!¿Puedes explicarme la línea de código .filter? Funciona muy bien, pero realmente me gustaría entender lo que está haciendo para futuras referencias (soy nuevo en jquery). ¡Gracias por tu ayuda! Jon – Jon

+0

¡Gran explicación! Eso será una gran ayuda en el futuro. – Jon

+0

nickf - ¡gran explicación! No he visto filtros anidados como ese antes. Muy instructivo. –

0

que he tenido el mismo problema y lo resolvió con un poco de código corto aprovechando cada función de jQuery() para contraer durante el ajuste de enfoque con el punto [0] navegación de modo normal puede currículum.

http://spstring.jeffthink.com/?p=49

2
jQuery('#accordion').accordion({   
    active:-1, 
}); 
+0

gracias su trabajo bien. –

Cuestiones relacionadas