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 heightfrån dess nuvarande värde till 0. Med tanke på hur CSS hanterar animationer kan du inte använda paddingpå ett .collapseelement. Använd istället klassen som ett oberoende omslagselement.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
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 hrefeller data-target-attribut. Flera <button>eller <a>kan visa och dölja ett element om var och en refererar till det med sitt hrefeller data-targetattribut
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
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 .accordionsom omslag.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua sätta en fågel på det bläckfisk enkaffe kaffe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, hantverksöl labore wes anderson cred nesciunt sapiente ea proident. Annons vegan excepteur butcher vice lomo. Leggings occaecat hantverksöl från jord till bord, rå denim estetisk synth nesciunt du förmodligen inte har hört talas om dem accusamus labore hållbar VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Tillgänglighet
Var noga med att lägga aria-expandedtill 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 showklassen, 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-targetattributet pekar på en idväljare – bör du lägga till aria-controlsattributet till kontrollelementet som innehåller iddet 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 WAI-ARIA Authoring Practices 1.1 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:
.collapsedöljer innehållet
.collapse.showvisar innehållet
.collapsinglä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-targettill elementet för att automatiskt tilldela kontroll över ett eller flera hopfällbara element. Attributet data-targetaccepterar en CSS-väljare att tillämpa komprimeringen på. Se till att lägga till klassen collapsei 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:
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å cardklassen). 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 .
Aktiverar ditt innehåll som ett hopfällbart element. Accepterar ett valfritt alternativ object.
.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.collapseeller hidden.bs.collapseinträ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.collapsehä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.collapsehä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 showinstansmetoden 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 hidemetoden 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).