Kollapse
Bytt synligheten av innhold på tvers av prosjektet ditt med noen få klasser og JavaScript-plugins.
Hvordan det fungerer
Skjul JavaScript-pluginen brukes til å vise og skjule innhold. Knapper eller ankere brukes som utløsere som er tilordnet spesifikke elementer du veksler mellom. Hvis du skjuler et element, animeres det height
fra gjeldende verdi til 0
. Gitt hvordan CSS håndterer animasjoner, kan du ikke bruke padding
på et .collapse
element. Bruk i stedet klassen som et uavhengig innpakningselement.
prefers-reduced-motion
mediesøket. Se delen
for redusert bevegelse i tilgjengelighetsdokumentasjonen vår .
Eksempel
Klikk på knappene nedenfor for å vise og skjule et annet element via klasseendringer:
.collapse
skjuler innhold.collapsing
brukes under overganger.collapse.show
viser innhold
Generelt anbefaler vi å bruke en knapp med data-bs-target
attributtet. Selv om det ikke anbefales fra et semantisk synspunkt, kan du også bruke en lenke med href
attributtet (og en role="button"
). I begge tilfeller er det data-bs-toggle="collapse"
nødvendig.
<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>
Flere mål
En <button>
eller <a>
kan vise og skjule flere elementer ved å referere til dem med en velger i sin href
eller data-bs-target
attributt. Flere <button>
eller <a>
kan vise og skjule et element hvis de refererer til det med sitt href
eller data-bs-target
attributt
<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>
tilgjengelighet
Sørg for å legge aria-expanded
til kontrollelementet. Dette attributtet formidler eksplisitt den nåværende tilstanden til det sammenleggbare elementet knyttet til kontrollen til skjermlesere og lignende hjelpeteknologier. Hvis det sammenleggbare elementet er lukket som standard, skal attributtet på kontrollelementet ha en verdi på aria-expanded="false"
. Hvis du har satt det sammenleggbare elementet til å være åpent som standard ved hjelp av show
klassen, sett aria-expanded="true"
på kontrollen i stedet. Programtillegget vil automatisk veksle mellom dette attributtet på kontrollen basert på om det sammenleggbare elementet har blitt åpnet eller lukket (via JavaScript, eller fordi brukeren utløste et annet kontrollelement også knyttet til det samme sammenleggbare elementet). Hvis kontrollelementets HTML-element ikke er en knapp (f.eks. en <a>
eller <div>
), attributtetrole="button"
skal legges til elementet.
Hvis kontrollelementet ditt målretter mot et enkelt sammenleggbart element – dvs. at data-bs-target
attributtet peker til en id
velger – bør du legge til aria-controls
attributtet til kontrollelementet, som inneholder id
det sammenleggbare elementet. Moderne skjermlesere og lignende hjelpeteknologier bruker dette attributtet for å gi brukere ekstra snarveier for å navigere direkte til selve det sammenleggbare elementet.
Merk at Bootstraps nåværende implementering ikke dekker de ulike valgfrie tastaturinteraksjonene beskrevet i WAI-ARIA Authoring Practices 1.1 trekkspillmønsteret - du må inkludere disse selv med tilpasset JavaScript.
Sass
Variabler
$transition-collapse: height .35s ease;
Klasser
Kollapsovergangsklasser kan finnes i scss/_transitions.scss
da disse deles på tvers av flere komponenter (kollaps og trekkspill).
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
}
Bruk
Kollaps-pluginen bruker noen få klasser for å håndtere tunge løft:
.collapse
skjuler innholdet.collapse.show
viser innholdet.collapsing
legges til når overgangen starter, og fjernes når den er ferdig
Disse klassene finner du i _transitions.scss
.
Via dataattributter
Bare legg til data-bs-toggle="collapse"
og a data-bs-target
til elementet for automatisk å tildele kontroll over ett eller flere sammenleggbare elementer. Attributtet data-bs-target
godtar en CSS-velger å bruke sammenbruddet på. Sørg for å legge klassen collapse
til det sammenleggbare elementet. Hvis du vil at den skal åpnes som standard, legger du til den ekstra klassen show
.
For å legge til trekkspilllignende gruppestyring til et sammenleggbart område, legg til dataattributtet data-bs-parent="#selector"
. Se demoen for å se dette i aksjon.
Via JavaScript
Aktiver manuelt med:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Alternativer
Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-bs-
, som i data-bs-parent=""
.
Navn | Type | Misligholde | Beskrivelse |
---|---|---|---|
parent |
velger | jQuery objekt | DOM-element | false |
Hvis overordnet er oppgitt, vil alle sammenleggbare elementer under den angitte overordnede bli lukket når dette sammenleggbare elementet vises. (ligner på tradisjonell trekkspilladferd - dette er avhengig av card klassen). Attributten må settes på det sammenleggbare målet. |
toggle |
boolsk | true |
Veksler på det sammenleggbare elementet ved påkalling |
Metoder
Asynkrone metoder og overganger
Alle API-metoder er asynkrone og starter en overgang . De går tilbake til den som ringer så snart overgangen er startet, men før den avsluttes . I tillegg vil et metodekall på en overgangskomponent bli ignorert .
Aktiverer innholdet ditt som et sammenleggbart element. Godtar et valgfritt alternativ object
.
Du kan opprette en kollapsforekomst med konstruktøren, for eksempel:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Metode | Beskrivelse |
---|---|
toggle |
Bytter et sammenleggbart element til vist eller skjult. Går tilbake til den som ringer før det sammenleggbare elementet faktisk har blitt vist eller skjult (dvs. før hendelsen shown.bs.collapse eller hidden.bs.collapse inntreffer). |
show |
Viser et sammenleggbart element. Går tilbake til den som ringer før det sammenleggbare elementet faktisk har blitt vist (f.eks. før shown.bs.collapse hendelsen inntreffer). |
hide |
Skjuler et sammenleggbart element. Går tilbake til den som ringer før det sammenleggbare elementet faktisk har blitt skjult (f.eks. før hidden.bs.collapse hendelsen inntreffer). |
dispose |
Ødelegger et elements kollaps. (Fjerner lagrede data på DOM-elementet) |
getInstance |
Statisk metode som lar deg få kollapsforekomsten knyttet til et DOM-element, du kan bruke det slik:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
Statisk metode som returnerer en kollapsforekomst knyttet til et DOM-element eller oppretter en ny i tilfelle den ikke ble initialisert. Du kan bruke det slik:bootstrap.Collapse.getOrCreateInstance(element) |
arrangementer
Bootstraps kollapsklasse avslører noen få hendelser for å koble seg til kollapsfunksjonalitet.
Hendelsestype | Beskrivelse |
---|---|
show.bs.collapse |
Denne hendelsen utløses umiddelbart når show instansmetoden kalles. |
shown.bs.collapse |
Denne hendelsen utløses når et kollapselement er gjort synlig for brukeren (vil vente på at CSS-overganger er fullført). |
hide.bs.collapse |
Denne hendelsen utløses umiddelbart når hide metoden har blitt kalt. |
hidden.bs.collapse |
Denne hendelsen utløses når et kollapselement er skjult for brukeren (vil vente på at CSS-overganger er fullført). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})