javascript - eventos - Modifique el complemento de colapsado de Twitter Bootstrap para mantener abiertos los acordeones
collapse js (4)
En realidad, no es necesario modificar ningún código . Lea la siguiente declaración detenidamente desde el sitio twitterbootstrap
Simplemente agregue data-toggle = "collapse" y un target de datos al elemento para asignar automáticamente el control de un elemento colapsable. El atributo de destino de datos acepta un selector css para aplicar el colapso a. Asegúrese de agregar el colapso de clase al elemento colapsable. Si desea que se abra de forma predeterminada, agregue la clase adicional en.
Entonces, en lugar de usar data-parent=''#idofAccordion'' , use data-target=''#idofCollapseItem'' .
Debería funcionar perfectamente.
Aquí está la demo en Plunker
Estoy intentando modificar el complemento de colapso de Bootstrap para permitirme especificar si hacer clic en un acordeón (para abrir) debería cerrar automáticamente los demás elementos en el acordeón (para que se pueda abrir más de un elemento en el acordeón a la vez)
Quiero crear un nuevo atributo de datos en el acordeón, algo así como data-collapse-type="auto|manual"
Los plugins jQuery bootstrap están un poco avanzados para mi nivel de habilidad. La parte más relevante de lo que necesito actives.collapse(''hide'') parece estar en la línea 52, actives.collapse(''hide'') . No quiero que eso suceda si se establece ''data-collapse-type ='' manual '''' (se omite el atributo o la configuración auto debe mantener el comportamiento predeterminado).
Creé un jsfiddle donde estuve experimentando .
¿Alguien puede ayudarme a seguir el camino correcto con esto?
He bifurcado y actualizado tu violín.
solo ve a la función .show, también escribí los comentarios.
La técnica para tener solo un acordeón abierto a la vez (es decir, colapsar el resto), es colocar tanto data-parent = "# accordion" data-target = "# collapseOne" para que se vea así
<a class="accordion-toggle" data-toggle="collapse" href="#"
data-parent="#accordion" data-target="#collapseOne">
Item #1
</a>
Puedes verlo en plunker: http://plnkr.co/edit/56iXtA?p=preview
dado que la pregunta no se refería a una versión específica de Bootstrap, aquí hay una solución bootstrap 4: elimine el data-parent="#accordion" de las etiquetas con el atributo data-toggle="collapse" . Es el ejemplo tomado de la documentación de Colapso con el bit data-parent=#accordion" sacado.
bootply: https://www.bootply.com/3wV4WbzBtT#