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.

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-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-toggle="collapse"påkrævet.

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

Vandret

Collapse-pluginnet understøtter også horisontal kollaps. Tilføj .widthmodifikatorklassen 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-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>

Flere mål

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

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

Eksempel på harmonika

Ved at bruge kortkomponenten kan du udvide standardsammenbrudsadfærden for at skabe en harmonika. For korrekt at opnå harmonikastilen skal du sørge for at bruge .accordionsom indpakning.

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

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-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 tastaturinteraktioner, der er beskrevet i ARIA Authoring Practices Guide harmonikamønster - du skal selv inkludere disse med tilpasset JavaScript.

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-toggle="collapse"og a data-targettil elementet for automatisk at tildele kontrol over et eller flere sammenfoldelige elementer. Attributten data-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-parent="#selector". Se demoen for at se dette i aktion.

Via JavaScript

Aktiver manuelt med:

$('.collapse').collapse()

Muligheder

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

Metoder

.collapse(options)

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

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('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).

.collapse('show')

Viser et sammenklappeligt element. Vender tilbage til den, der ringer, før det sammenklappelige element faktisk er blevet vist (dvs. før shown.bs.collapsehændelsen indtræffer).

.collapse('hide')

Skjuler et sammenklappeligt element. Vender tilbage til den, der ringer, før det sammenklappelige element rent faktisk er blevet skjult (dvs. før hidden.bs.collapsehændelsen indtræffer).

.collapse('dispose')

Ødelægger et elements sammenbrud.

Begivenheder

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

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})