Bryder sammen

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.

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.

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

<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

<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, der er beskrevet i ARIA Authoring Practices Guide harmonikamønster - 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:

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

Muligheder

Da muligheder kan videregives via dataattributter eller JavaScript, kan du tilføje et indstillingsnavn til data-bs-, som i data-bs-animation="{value}". Sørg for at ændre sagstypen for indstillingsnavnet fra " camelCase " til " kebab-case ", når du videregiver mulighederne via dataattributter. Brug for eksempel i data-bs-custom-class="beautifier"stedet for data-bs-customClass="beautifier".

Fra Bootstrap 5.2.0 understøtter alle komponenter en eksperimentel reserveret dataattribut data-bs-config, der kan rumme simpel komponentkonfiguration som en JSON-streng. Når et element har data-bs-config='{"delay":0, "title":123}'og data-bs-title="456"attributter, vil den endelige titleværdi være, 456og de separate dataattributter vil tilsidesætte værdier givet på data-bs-config. Derudover er eksisterende dataattributter i stand til at rumme JSON-værdier som data-bs-delay='{"show":0,"hide":150}'.

Metoder

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

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

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

Begivenheder

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

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})