Un simple colapso/expandsión persistente con jquery
Estoy manteniendo un proyecto legado y reescribió esta pieza recientemente. originalmente fue escrito hace una década. jQuery todavía está disponible en el medio ambiente y no se ha tomado ninguna decisión para mover esta pieza a React, así que usaremos jQuery.
más2022-10-04 actualización: Añadido el detalle stopPropagation(), en caso de que su toggle clicable contiene otros elementos interactivos como botones o una barra de búsqueda.
El formalismo que estoy usando, llevado de las decisiones tomadas hace una década, es añadir la clase .collapse-expand a un icono, y haciendo clic que cambiaría la visibilidad del siguiente elemento DOM.
Sin persistencia la solución es una sola línea de javascript:
$( "collapse-expand").click(función() { $(este).next().slideToggle() })
Con persistencia, utilizaremos el almacenamiento local y añadiremos otro formalismo: el almacenamiento clave que elemento se derrumbe y expende, y la palabra clave para el estado. La palabra clave que uso es "collapsed"Y es sólo una cuerda en este caso.
(Side note: Tengo un formalismo para la constanteización y seguimiento de las palabras clave de javascript como esta. Funciona bastante bien, es robusto y no requiere cambiar todo el proyecto para escribir y deshacerse de su tubería de construcción. Si quieres que lo describa -- por favor deja un comentario, y si la gente está interesada, publicaré otro artículo sobre este tema.)
La clave que almacena la palabra clave es `collapse-expand#${thisId}`. El elemento DOM que tiene la clase .collapse-expand tiene que tener una id, para que cada elemento de tracción pueda ser mantenido seguimiento. Por lo tanto, si el id es #simpleId, y el elemento dom es .collapse-expand#simpleId, entonces la clave se convierte “collapse-expand#simpleId".
(Side note: si alguna vez pensaste en qué convención de nombres es más correcto: simpleID o simpleIdmi opinión es que simpleId es el correcto. La razón detrás es: "id" significa "identificador" y no es un acrónimo de dos palabras. Carta “d” en “id” no significa una palabra separada y por lo tanto en una conversión de camelCase a snake_case, “id" no debe ser "i_d". Es una palabra, sin una letra mayúscula en el medio.)
Tenga en cuenta también que la estructura DOM requiere que el elemento collapsible sea el siguiente, no un niño. Así que esta estructura es correcta:
El contenido que quiero cambiar
Contraste al incorrecto donde la sección plegable no es un siguiente elemento:
El contenido que quiero cambiar
Por último, necesitamos que los elementos persistentes y colapsados se derrumben en la carga de la página. I iterate sobre todos los elementos con clase .collapse-expand, y doblarlos si la persistencia dice que están doblados. Además, al hacer clic, el estado se almacena persistentemente.
Con eso, aquí está la totalidad del código javascript:
$( "collapse-expand").each(función() {}
const thisId = $(esto).attr('id')
const state = localStorage.getItem("collapse-expand#"+thisId)
si (estado === 'collapsed') {}
$(esto).next().slideToggle();
}
})
$( "collapse-expand").click(función () {
const thisId = $(esto).attr('id')
const state = localStorage.getItem("collapse-expand#"+thisId)
si (estado === 'collapsed') {}
localStorage.removeItem("collapse-expand#"+thisId)
Si no
localStorage.setItem("collapse-expand#"+this Id, "collapsed")
}
$(esto).next().slideToggle();
}).children().click(función e) {
e.stopPropagation()
})
Una mejora puede ser cambiar el icono, de colapsado a expandido, del elemento clicable, y al estilo del puntero para significar que es clicable. Lo dejaré como ejercicio para el lector. La idea básica es añadir/remove .collapsed .expanded clases (separadas desde .collapse-expand clase) y estilo cada icono de clase por separado.