Source

Kollapse

Bytt synligheten av innhold på tvers av prosjektet ditt med noen få klasser og JavaScript-plugins.

Hvordan det fungerer

Skjul JavaScript-pluginen brukes til å vise og skjule innhold. Knapper eller ankere brukes som utløsere som er tilordnet spesifikke elementer du veksler mellom. Hvis du skjuler et element, animeres det heightfra gjeldende verdi til 0. Gitt hvordan CSS håndterer animasjoner, kan du ikke bruke paddingpå et .collapseelement. Bruk i stedet klassen som et uavhengig innpakningselement.

Eksempel

Klikk på knappene nedenfor for å vise og skjule et annet element via klasseendringer:

  • .collapseskjuler innhold
  • .collapsingbrukes under overganger
  • .collapse.showviser innhold

Du kan bruke en lenke med hrefattributtet, eller en knapp med data-targetattributtet. I begge tilfeller er det data-toggle="collapse"nødvendig.

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. 
<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">
    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.
  </div>
</div>

Flere mål

En <button>eller <a>kan vise og skjule flere elementer ved å referere til dem med en JQuery-velger i dens hrefeller - data-targetattributt. Flere <button>eller <a>kan vise og skjule et element hvis de refererer til det med sitt hrefeller data-targetattributt

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. 
<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">
        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.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        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.
      </div>
    </div>
  </div>
</div>

Trekkspill eksempel

Ved å bruke kortkomponenten kan du utvide standard kollapsatferd for å lage et trekkspill.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunsj. 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. Annonse vegansk unntatt slakter vice lomo. Leggings occaecat craft beer farm-to-table, rå denim estetisk synth nesciunt du sannsynligvis ikke har hørt om dem accusamus labore bærekraftig 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. 
<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        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.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        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.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        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.
      </div>
    </div>
  </div>
</div>

tilgjengelighet

Sørg for å legge aria-expandedtil kontrollelementet. Dette attributtet formidler eksplisitt den nåværende tilstanden til det sammenleggbare elementet knyttet til kontrollen til skjermlesere og lignende hjelpeteknologier. Hvis det sammenleggbare elementet er lukket som standard, skal attributtet på kontrollelementet ha en verdi på aria-expanded="false". Hvis du har satt det sammenleggbare elementet til å være åpent som standard ved hjelp av showklassen, sett aria-expanded="true"på kontrollen i stedet. Programtillegget vil automatisk veksle mellom dette attributtet på kontrollen basert på om det sammenleggbare elementet har blitt åpnet eller lukket (via JavaScript, eller fordi brukeren utløste et annet kontrollelement også knyttet til det samme sammenleggbare elementet). Hvis kontrollelementets HTML-element ikke er en knapp (f.eks. en <a>eller <div>), attributtetrole="button"skal legges til elementet.

Hvis kontrollelementet ditt målretter mot et enkelt sammenleggbart element – ​​dvs. at data-targetattributtet peker til en idvelger – bør du legge til aria-controlsattributtet til kontrollelementet, som inneholder iddet sammenleggbare elementet. Moderne skjermlesere og lignende hjelpeteknologier bruker dette attributtet for å gi brukere ekstra snarveier for å navigere direkte til selve det sammenleggbare elementet.

Merk at Bootstraps nåværende implementering ikke dekker de ulike tastaturinteraksjonene beskrevet i WAI-ARIA Authoring Practices 1.1 trekkspillmønsteret - du må inkludere disse selv med tilpasset JavaScript.

Bruk

Kollaps-pluginen bruker noen få klasser for å håndtere tunge løft:

  • .collapseskjuler innholdet
  • .collapse.showviser innholdet
  • .collapsinglegges til når overgangen starter, og fjernes når den er ferdig

Disse klassene finner du i _transitions.scss.

Via dataattributter

Bare legg til data-toggle="collapse"og a data-targettil elementet for automatisk å tildele kontroll over ett eller flere sammenleggbare elementer. Attributtet data-targetgodtar en CSS-velger å bruke sammenbruddet på. Sørg for å legge klassen collapsetil det sammenleggbare elementet. Hvis du vil at den skal åpnes som standard, legger du til den ekstra klassen show.

For å legge til trekkspilllignende gruppestyring til et sammenleggbart område, legg til dataattributtet data-parent="#selector". Se demoen for å se dette i aksjon.

Via JavaScript

Aktiver manuelt med:

$('.collapse').collapse()

Alternativer

Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-, som i data-parent="".

Navn Type Misligholde Beskrivelse
forelder velger | jQuery objekt | DOM-element falsk Hvis overordnet er oppgitt, vil alle sammenleggbare elementer under den angitte overordnede bli lukket når dette sammenleggbare elementet vises. (ligner på tradisjonell trekkspilladferd - dette er avhengig av cardklassen). Attributten må settes på det sammenleggbare målet.
veksle boolsk ekte Veksler på det sammenleggbare elementet ved påkalling

Metoder

Asynkrone metoder og overganger

Alle API-metoder er asynkrone og starter en overgang . De går tilbake til den som ringer så snart overgangen er startet, men før den avsluttes . I tillegg vil et metodekall på en overgangskomponent bli ignorert .

Se vår JavaScript-dokumentasjon for mer informasjon.

.collapse(options)

Aktiverer innholdet ditt som et sammenleggbart element. Godtar et valgfritt alternativ object.

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

.collapse('toggle')

Bytter et sammenleggbart element til vist eller skjult. Går tilbake til den som ringer før det sammenleggbare elementet faktisk har blitt vist eller skjult (dvs. før hendelsen shown.bs.collapseeller hidden.bs.collapseinntreffer).

.collapse('show')

Viser et sammenleggbart element. Går tilbake til den som ringer før det sammenleggbare elementet faktisk har blitt vist (dvs. før shown.bs.collapsehendelsen inntreffer).

.collapse('hide')

Skjuler et sammenleggbart element. Går tilbake til den som ringer før det sammenleggbare elementet faktisk har blitt skjult (dvs. før hidden.bs.collapsehendelsen inntreffer).

.collapse('dispose')

Ødelegger et elements kollaps.

arrangementer

Bootstraps kollapsklasse avslører noen få hendelser for å koble seg til kollapsfunksjonalitet.

Hendelsestype Beskrivelse
show.bs.kollaps Denne hendelsen utløses umiddelbart når showinstansmetoden kalles.
vist.bs.kollaps Denne hendelsen utløses når et kollapselement er gjort synlig for brukeren (vil vente på at CSS-overganger er fullført).
skjule.bs.kollaps Denne hendelsen utløses umiddelbart når hidemetoden har blitt kalt.
skjult.bs.kollaps Denne hendelsen utløses når et kollapselement er skjult for brukeren (vil vente på at CSS-overganger er fullført). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})