Kollaps
Växla synligheten av innehåll i ditt projekt med några klasser och våra JavaScript-plugin.
Hur det fungerar
JavaScript-pluginet för kollaps används för att visa och dölja innehåll. Knappar eller ankare används som utlösare som mappas till specifika element som du växlar. Om du komprimerar ett element animeras det height
från dess nuvarande värde till 0
. Med tanke på hur CSS hanterar animationer kan du inte använda padding
på ett .collapse
element. Använd istället klassen som ett oberoende omslagselement.
prefers-reduced-motion
mediefrågan. Se
avsnittet för reducerad rörelse i vår tillgänglighetsdokumentation .
Exempel
Klicka på knapparna nedan för att visa och dölja ett annat element via klassändringar:
.collapse
döljer innehåll.collapsing
tillämpas under övergångar.collapse.show
visar innehåll
I allmänhet rekommenderar vi att du använder en knapp med data-target
attributet. Även om det inte rekommenderas ur en semantisk synvinkel, kan du också använda en länk med href
attributet (och ett role="button"
). I båda fallen data-toggle="collapse"
krävs.
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-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>
Horisontell
Insticksprogrammet för kollaps stöder även horisontell kollaps. Lägg till .width
modifieringsklassen för att övergå till width
istället för height
och ställ in a width
på det omedelbara underordnade elementet. Skriv gärna din egen anpassade Sass, använd inline-stilar eller använd våra breddverktyg .
min-height
uppsättning för att undvika överdrivna ommålningar i våra dokument, krävs detta inte uttryckligen.
Endast width
on the child-elementet krävs.
<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Toggle width collapse
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse width" id="collapseWidthExample">
<div class="card card-body" style="width: 320px;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
</div>
Flera mål
En <button>
eller <a>
kan visa och dölja flera element genom att referera till dem med en JQuery-väljare i dess href
eller data-target
-attribut. Flera <button>
eller <a>
kan visa och dölja ett element om var och en refererar till det med sitt href
eller data-target
attribut
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-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>
Exempel på dragspel
Med hjälp av kortkomponenten kan du utöka standardkollapsbeteendet för att skapa ett dragspel. För att korrekt uppnå dragspelsstilen, se till att använda .accordion
som omslag.
.show
klassen.
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the second accordion panel. This panel is hidden by default.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
</div>
</div>
</div>
</div>
Tillgänglighet
Var noga med att lägga aria-expanded
till kontrollelementet. Det här attributet förmedlar explicit det aktuella tillståndet för det hopfällbara elementet kopplat till kontrollen till skärmläsare och liknande hjälpmedelstekniker. Om det hopfällbara elementet är stängt som standard ska attributet på kontrollelementet ha värdet aria-expanded="false"
. Om du har angett att det hopfällbara elementet ska vara öppet som standard med show
klassen, ställ in aria-expanded="true"
på kontrollen istället. Insticksprogrammet växlar automatiskt detta attribut på kontrollen baserat på om det hopfällbara elementet har öppnats eller stängts (via JavaScript, eller för att användaren utlöste ett annat kontrollelement som också är kopplat till samma hopfällbara element). Om kontrollelementets HTML-element inte är en knapp (t.ex. en <a>
eller <div>
), attributetrole="button"
bör läggas till elementet.
Om ditt kontrollelement är inriktat på ett enstaka hopfällbart element – dvs data-target
attributet pekar på en id
väljare – bör du lägga till aria-controls
attributet till kontrollelementet som innehåller id
det hopfällbara elementet. Moderna skärmläsare och liknande hjälpmedel använder detta attribut för att ge användarna ytterligare genvägar för att navigera direkt till själva det hopfällbara elementet.
Observera att Bootstraps nuvarande implementering inte täcker de olika tangentbordsinteraktionerna som beskrivs i ARIA Authoring Practices Guide dragspelsmönster - du måste inkludera dessa själv med anpassad JavaScript.
Användande
Kollapspluginen använder några klasser för att hantera tunga lyft:
.collapse
döljer innehållet.collapse.show
visar innehållet.collapsing
läggs till när övergången startar och tas bort när den är klar
Dessa klasser finns i _transitions.scss
.
Via dataattribut
Lägg bara till data-toggle="collapse"
och ett data-target
till elementet för att automatiskt tilldela kontroll över ett eller flera hopfällbara element. Attributet data-target
accepterar en CSS-väljare att tillämpa komprimeringen på. Se till att lägga till klassen collapse
i det hopfällbara elementet. Om du vill att den ska öppnas som standard lägger du till den extra klassen show
.
Lägg till dataattributet för att lägga till dragspelsliknande grupphantering till ett hopfällbart område data-parent="#selector"
. Se demon för att se detta i aktion.
Via JavaScript
Aktivera manuellt med:
$('.collapse').collapse()
alternativ
Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-
, som i data-parent=""
.
namn | Typ | Standard | Beskrivning |
---|---|---|---|
förälder | väljare | jQuery-objekt | DOM-element | falsk | Om förälder tillhandahålls kommer alla hopfällbara element under den angivna överordnade att stängas när detta hopfällbara objekt visas. (liknar traditionellt dragspelsbeteende - detta beror på card klassen). Attributet måste ställas in på det hopfällbara målet. |
växla | booleskt | Sann | Växlar det hopfällbara elementet vid anrop |
Metoder
Asynkrona metoder och övergångar
Alla API - metoder är asynkrona och startar en övergång . De återvänder till den som ringer så snart övergången har påbörjats men innan den slutar . Dessutom kommer ett metodanrop på en övergångskomponent att ignoreras .
.collapse(options)
Aktiverar ditt innehåll som ett hopfällbart element. Accepterar ett valfritt alternativ object
.
$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle')
Växlar ett hopfällbart element till att visas eller döljas. Återgår till den som ringer innan det hopfällbara elementet faktiskt har visats eller dolt (dvs innan händelsen shown.bs.collapse
eller hidden.bs.collapse
inträffar).
.collapse('show')
Visar ett hopfällbart element. Återgår till den som ringer innan det hopfällbara elementet faktiskt har visats (dvs innan shown.bs.collapse
händelsen inträffar).
.collapse('hide')
Döljer ett hopfällbart element. Återgår till den som ringer innan det hopfällbara elementet faktiskt har dolts (dvs innan hidden.bs.collapse
händelsen inträffar).
.collapse('dispose')
Förstör ett elements kollaps.
evenemang
Bootstraps kollapsklass avslöjar några händelser för att koppla in kollapsfunktionalitet.
Event typ | Beskrivning |
---|---|
visa.bs.kollaps | Denna händelse aktiveras omedelbart när show instansmetoden anropas. |
visas.bs.kollaps | Den här händelsen utlöses när ett kollapselement har gjorts synligt för användaren (väntar på att CSS-övergångar ska slutföras). |
hide.bs.kollaps | Denna händelse aktiveras omedelbart när hide metoden har anropats. |
hidden.bs.kollaps | Den här händelsen utlöses när ett kollapselement har dolts för användaren (väntar på att CSS-övergångar ska slutföras). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})