Col·lapse
Commuteu la visibilitat del contingut del vostre projecte amb algunes classes i els nostres connectors de JavaScript.
Com funciona
El connector de JavaScript de col·lapse s'utilitza per mostrar i ocultar contingut. Els botons o ancoratges s'utilitzen com a activadors que s'assignen a elements específics que activeu. Si col·laps un element, s'animarà height
del seu valor actual a 0
. Tenint en compte com CSS gestiona les animacions, no es pot utilitzar padding
en un .collapse
element. En comptes d'això, utilitzeu la classe com a element d'embolcall independent.
prefers-reduced-motion
consulta de mitjans. Consulteu la
secció de moviment reduït de la nostra documentació d'accessibilitat .
Exemple
Feu clic als botons següents per mostrar i amagar un altre element mitjançant els canvis de classe:
.collapse
amaga contingut.collapsing
s'aplica durant les transicions.collapse.show
mostra contingut
En general, recomanem utilitzar un botó amb l' data-bs-target
atribut. Tot i que no es recomana des d'un punt de vista semàntic, també podeu utilitzar un enllaç amb l' href
atribut (i un role="button"
). En ambdós casos, data-bs-toggle="collapse"
és necessari.
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
Múltiples objectius
A <button>
o <a>
pot mostrar i ocultar diversos elements fent-los referència amb un selector al seu atribut href
o . data-bs-target
Múltiples <button>
o <a>
poden mostrar i amagar un element si cadascun hi fa referència amb el seu atribut href
odata-bs-target
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
Accessibilitat
Assegureu-vos d'afegir aria-expanded
a l'element de control. Aquest atribut transmet explícitament l'estat actual de l'element plegable vinculat al control als lectors de pantalla i tecnologies d'assistència similars. Si l'element plegable es tanca per defecte, l'atribut de l'element de control hauria de tenir un valor de aria-expanded="false"
. Si heu configurat l'element plegable perquè estigui obert de manera predeterminada mitjançant la show
classe, configureu aria-expanded="true"
-lo al control. El connector canviarà automàticament aquest atribut al control en funció de si l'element plegable s'ha obert o tancat (mitjançant JavaScript, o perquè l'usuari ha activat un altre element de control també lligat al mateix element plegable). Si l'element HTML de l'element de control no és un botó (per exemple, un <a>
o <div>
), l'atributrole="button"
s'ha d'afegir a l'element.
Si el vostre element de control està orientat a un únic element plegable, és a dir, l' data-bs-target
atribut apunta a un id
selector, hauríeu d'afegir l' aria-controls
atribut a l'element de control, que conté l' id
element de l'element plegable. Els lectors de pantalla moderns i tecnologies d'assistència similars fan ús d'aquest atribut per oferir als usuaris dreceres addicionals per navegar directament a l'element plegable.
Tingueu en compte que la implementació actual de Bootstrap no cobreix les diverses interaccions opcionals del teclat descrites al patró d'acordió WAI-ARIA Authoring Practices 1.1 ; haureu d'incloure-les vosaltres mateixos amb JavaScript personalitzat.
Sass
Les variables
$transition-collapse: height .35s ease;
Classes
Es poden trobar classes de transició de col·lapse, scss/_transitions.scss
ja que es comparteixen entre diversos components (col·lapse i acordió).
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
}
Ús
El connector de col·lapse utilitza unes quantes classes per gestionar el treball pesat:
.collapse
amaga el contingut.collapse.show
mostra el contingut.collapsing
s'afegeix quan comença la transició i s'elimina quan s'acaba
Aquestes classes es poden trobar a _transitions.scss
.
Mitjançant atributs de dades
Només cal afegir data-bs-toggle="collapse"
i a data-bs-target
a l'element per assignar automàticament el control d'un o més elements plegables. L' data-bs-target
atribut accepta un selector CSS al qual aplicar el col·lapse. Assegureu-vos d'afegir la classe collapse
a l'element plegable. Si voleu que s'obri per defecte, afegiu la classe addicional show
.
Per afegir una gestió de grups semblant a un acordió a una àrea plegable, afegiu l'atribut de dades data-bs-parent="#selector"
. Consulteu la demostració per veure-ho en acció.
Mitjançant JavaScript
Habilita manualment amb:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Opcions
Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-bs-
, com a data-bs-parent=""
.
Nom | Tipus | Per defecte | Descripció |
---|---|---|---|
parent |
selector | Objecte jQuery | Element DOM | false |
Si es proporciona un element principal, es tancaran tots els elements plegables sota el pare especificat quan es mostri aquest element plegable. (semblant al comportament d'acordió tradicional - això depèn de la card classe). L'atribut s'ha d'establir a l'àrea plegable objectiu. |
toggle |
booleà | true |
Commuta l'element plegable en invocació |
Mètodes
Mètodes asíncrons i transicions
Tots els mètodes de l'API són asíncrons i comencen una transició . Tornen a la persona que truca tan bon punt s'inicia la transició però abans que acabi . A més, s'ignorarà una trucada de mètode en un component en transició .
Consulteu la nostra documentació de JavaScript per obtenir més informació .
Activa el teu contingut com a element plegable. Accepta opcions opcionals object
.
Podeu crear una instància de col·lapse amb el constructor, per exemple:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Mètode | Descripció |
---|---|
toggle |
Commuta un element plegable per mostrar-lo o amagar-lo. Torna a la persona que truca abans que l'element plegable s'hagi mostrat o amagat (és a dir, abans que es produeixi l'esdeveniment shown.bs.collapse o ).hidden.bs.collapse |
show |
Mostra un element plegable. Torna a la persona que truca abans que s'hagi mostrat realment l'element plegable (p. ex., abans shown.bs.collapse que es produeixi l'esdeveniment). |
hide |
Amaga un element plegable. Torna a la persona que truca abans que l'element plegable s'hagi amagat (per exemple, abans hidden.bs.collapse que es produeixi l'esdeveniment). |
dispose |
Destrueix el col·lapse d'un element. (Elimina les dades emmagatzemades a l'element DOM) |
getInstance |
Mètode estàtic que us permet obtenir la instància de col·lapse associada a un element DOM, podeu utilitzar-lo així:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
Mètode estàtic que retorna una instància de col·lapse associada a un element DOM o en crea una de nova en cas que no s'hagi inicialitzat. Podeu utilitzar-lo així:bootstrap.Collapse.getOrCreateInstance(element) |
Esdeveniments
La classe de col·lapse de Bootstrap exposa alguns esdeveniments per connectar-se a la funcionalitat de col·lapse.
Tipus d'esdeveniment | Descripció |
---|---|
show.bs.collapse |
Aquest esdeveniment s'activa immediatament quan show es crida al mètode d'instància. |
shown.bs.collapse |
Aquest esdeveniment s'activa quan un element de col·lapse s'ha fet visible per a l'usuari (esperarà que finalitzin les transicions CSS). |
hide.bs.collapse |
Aquest esdeveniment s'activa immediatament quan hide s'ha cridat el mètode. |
hidden.bs.collapse |
Aquest esdeveniment s'activa quan un element de col·lapse s'ha amagat per a l'usuari (esperarà que finalitzin les transicions CSS). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})