Spring til hovedindhold Spring til dokumentnavigation
in English

Bryder sammen

Skift synligheden af ​​indhold på tværs af dit projekt med nogle få klasser og vores JavaScript-plugins.

Hvordan det virker

Collapse JavaScript-plugin'et bruges til at vise og skjule indhold. Knapper eller ankre bruges som udløsere, der er knyttet til bestemte elementer, du skifter til. Hvis du skjuler et element, animeres det heightfra dets aktuelle værdi til 0. I betragtning af hvordan CSS håndterer animationer, kan du ikke bruge paddingpå et .collapseelement. Brug i stedet klassen som et selvstændigt indpakningselement.

Animationseffekten af ​​denne komponent afhænger af prefers-reduced-motionmedieforespørgslen. Se afsnittet om reduceret bevægelse i vores tilgængelighedsdokumentation .

Eksempel

Klik på knapperne nedenfor for at vise og skjule et andet element via klasseændringer:

  • .collapseskjuler indhold
  • .collapsinganvendes under overgange
  • .collapse.showviser indhold

Generelt anbefaler vi at bruge en knap med data-bs-targetattributten. Selvom det ikke anbefales fra et semantisk synspunkt, kan du også bruge et link med hrefattributten (og en role="button"). I begge tilfælde er det data-bs-toggle="collapse"påkrævet.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<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>

Vandret

Collapse-pluginnet understøtter også horisontal kollaps. Tilføj .collapse-horizontalmodifikatorklassen for at overføre i widthstedet for heightog indstil a widthpå det umiddelbare underordnede element. Du er velkommen til at skrive din egen tilpassede Sass, bruge inline-stile eller bruge vores breddeværktøjer .

Bemærk venligst, at selvom eksemplet nedenfor har et min-heightsæt til at undgå overdreven maling i vores dokumenter, er dette ikke eksplicit påkrævet. Kun widthon the child-elementet er påkrævet.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

Flere mål

En <button>eller <a>kan vise og skjule flere elementer ved at henvise til dem med en vælger i dens hrefeller data-bs-targetattribut. Flere <button>eller <a>kan vise og skjule et element, hvis de hver især refererer til det med deres hrefeller data-bs-targetattribut

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.
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.
<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>

Tilgængelighed

Sørg for at tilføje aria-expandedtil kontrolelementet. Denne attribut formidler eksplicit den aktuelle tilstand af det sammenklappelige element, der er knyttet til styringen, til skærmlæsere og lignende hjælpeteknologier. Hvis det sammenklappelige element er lukket som standard, skal attributten på kontrolelementet have en værdi på aria-expanded="false". Hvis du har indstillet det sammenklappelige element til at være åbent som standard ved hjælp af showklassen, skal du indstille aria-expanded="true"på kontrolelementet i stedet. Plugin'et vil automatisk skifte denne attribut på kontrolelementet baseret på, om det sammenklappelige element er blevet åbnet eller lukket (via JavaScript, eller fordi brugeren udløste et andet kontrolelement, der også er bundet til det samme sammenklappelige element). Hvis kontrolelementets HTML-element ikke er en knap (f.eks. en <a>eller <div>), attributtenrole="button"skal tilføjes til elementet.

Hvis dit kontrolelement er målrettet mod et enkelt sammenklappeligt element - dvs. data-bs-targetattributten peger på en idvælger - skal du tilføje aria-controlsattributten til kontrolelementet, der indeholder iddet sammenklappelige element. Moderne skærmlæsere og lignende hjælpeteknologier gør brug af denne egenskab til at give brugerne yderligere genveje til at navigere direkte til selve det sammenklappelige element.

Bemærk, at Bootstraps nuværende implementering ikke dækker de forskellige valgfrie tastaturinteraktioner beskrevet i WAI-ARIA Authoring Practices 1.1 harmonikamønsteret - du skal selv inkludere disse med tilpasset JavaScript.

Sass

Variabler

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

Klasser

Kollapsovergangsklasser kan findes i, scss/_transitions.scssda disse deles på tværs af flere komponenter (kollaps og harmonika).

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

Brug

Collapse-pluginnet bruger et par klasser til at håndtere de tunge løft:

  • .collapseskjuler indholdet
  • .collapse.showviser indholdet
  • .collapsingtilføjes, når overgangen starter, og fjernes, når den er færdig

Disse klasser kan findes i _transitions.scss.

Via dataattributter

Du skal blot tilføje data-bs-toggle="collapse"og a data-bs-targettil elementet for automatisk at tildele kontrol over et eller flere sammenfoldelige elementer. Attributten data-bs-targetaccepterer en CSS-vælger at anvende sammenbruddet på. Sørg for at tilføje klassen collapsetil det sammenklappelige element. Hvis du vil have den til at åbne som standard, skal du tilføje den ekstra klasse show.

For at tilføje harmonika-lignende gruppestyring til et sammenklappeligt område skal du tilføje dataattributten data-bs-parent="#selector". Se harmonikasiden for mere information.

Via JavaScript

Aktiver manuelt med:

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

Muligheder

Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-bs-, som i data-bs-parent="".

Navn Type Standard Beskrivelse
parent vælger | jQuery objekt | DOM element false Hvis overordnet er angivet, lukkes alle sammenfoldelige elementer under den angivne overordnede, når dette sammenklappelige element vises. (svarende til traditionel harmonikaadfærd - dette afhænger af cardklassen). Attributten skal indstilles på det sammenklappelige målområde.
toggle boolesk true Slår det sammenklappelige element til eller fra ved kald

Metoder

Asynkrone metoder og overgange

Alle API - metoder er asynkrone og starter en overgang . De vender tilbage til den, der ringer, så snart overgangen er startet, men før den slutter . Derudover vil et metodekald på en overgangskomponent blive ignoreret .

Se vores JavaScript-dokumentation for mere information .

Aktiverer dit indhold som et sammenklappeligt element. Accepterer en valgfri indstilling object.

Du kan oprette en sammenbrudsforekomst med konstruktøren, for eksempel:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
Metode Beskrivelse
toggle Skifter et sammenklappeligt element til at blive vist eller skjult. Vender tilbage til den, der ringer, før det sammenklappelige element faktisk er blevet vist eller skjult (dvs. før hændelsen shown.bs.collapseeller hidden.bs.collapseindtræffer).
show Viser et sammenklappeligt element. Vender tilbage til den, der ringer, før det sammenklappelige element faktisk er blevet vist (f.eks. før shown.bs.collapsehændelsen indtræffer).
hide Skjuler et sammenklappeligt element. Vender tilbage til den, der ringer, før det sammenklappelige element rent faktisk er blevet skjult (f.eks. før hidden.bs.collapsehændelsen indtræffer).
dispose Ødelægger et elements sammenbrud. (Fjerner lagrede data på DOM-elementet)
getInstance Statisk metode, som giver dig mulighed for at få sammenbrudsforekomsten knyttet til et DOM-element, du kan bruge det sådan her:bootstrap.Collapse.getInstance(element)
getOrCreateInstance Statisk metode, som returnerer en sammenbrudsforekomst, der er knyttet til et DOM-element, eller opretter en ny, hvis den ikke blev initialiseret. Du kan bruge det sådan her:bootstrap.Collapse.getOrCreateInstance(element)

Begivenheder

Bootstraps kollapsklasse afslører nogle få hændelser for at tilslutte sig sammenbrudsfunktionalitet.

Begivenhedstype Beskrivelse
show.bs.collapse Denne hændelse udløses med det samme, når showinstansmetoden kaldes.
shown.bs.collapse Denne hændelse udløses, når et sammenbrudselement er blevet gjort synligt for brugeren (vil vente på, at CSS-overgange er fuldført).
hide.bs.collapse Denne hændelse udløses straks, når hidemetoden er blevet kaldt.
hidden.bs.collapse Denne hændelse udløses, når et sammenbrudselement er blevet skjult for brugeren (vil vente på, at CSS-overgange er fuldført).
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})