Colaps

Comutați vizibilitatea conținutului în cadrul proiectului dvs. cu câteva clase și pluginurile noastre JavaScript.

Cum functioneaza

Pluginul JavaScript restrâns este folosit pentru a afișa și a ascunde conținutul. Butoanele sau ancorele sunt folosite ca declanșatori care sunt mapate la anumite elemente pe care le comutați. Restrângerea unui element va anima de heightla valoarea sa curentă la 0. Având în vedere modul în care CSS gestionează animațiile, nu puteți utiliza paddingpe un .collapseelement. În schimb, utilizați clasa ca element independent de împachetare.

Exemplu

Faceți clic pe butoanele de mai jos pentru a afișa și a ascunde un alt element prin modificări de clasă:

• .collapseascunde conținutul
• .collapsingse aplică în timpul tranzițiilor
• .collapse.showafișează conținut

În general, vă recomandăm să folosiți un buton cu data-targetatributul. Deși nu este recomandat din punct de vedere semantic, puteți utiliza și o legătură cu hrefatributul (și un role="button"). În ambele cazuri, data-toggle="collapse"este necesar.

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

Orizontală

Pluginul de restrângere acceptă și restrângerea orizontală. Adăugați .widthclasa modificatoare pentru a face tranziția în widthloc de heightși setați a widthpe elementul secundar imediat. Simțiți-vă liber să scrieți propriul dvs. Sass personalizat, să utilizați stiluri inline sau să folosiți utilitatile noastre de lățime .

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

Ținte multiple

A <button>sau <a>poate afișa și ascunde mai multe elemente, referindu-le cu un selector JQuery în atributul hrefsau . data-targetMultiple <button>sau <a>pot afișa și ascunde un element dacă fiecare face referire la el cu atributul hrefsaudata-target

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

Exemplu de acordeon

Folosind componenta card , puteți extinde comportamentul de restrângere implicit pentru a crea un acordeon. Pentru a realiza corect stilul acordeonului, asigurați-vă că îl utilizați .accordionca înveliș.

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

Accesibilitate

Asigurați-vă că adăugați aria-expandedla elementul de control. Acest atribut transmite în mod explicit starea curentă a elementului pliabil legat de control către cititoarele de ecran și tehnologiile de asistență similare. Dacă elementul pliabil este închis implicit, atributul de pe elementul de control ar trebui să aibă valoarea aria-expanded="false". Dacă ați setat elementul pliabil să fie deschis în mod implicit folosind showclasa, setați aria-expanded="true"în schimb controlul. Pluginul va comuta automat acest atribut pe control în funcție de faptul dacă elementul pliabil a fost sau nu deschis sau închis (prin JavaScript sau pentru că utilizatorul a declanșat un alt element de control legat de același element pliabil). Dacă elementul HTML al elementului de control nu este un buton (de exemplu, un <a>sau <div>), atributulrole="button"ar trebui adăugat la element.

Dacă elementul dvs. de control vizează un singur element pliabil - adică data-targetatributul indică către un idselector - ar trebui să adăugați aria-controlsatributul la elementul de control, care conține idelementul pliabil. Cititoarele de ecran moderne și tehnologiile de asistență similare folosesc acest atribut pentru a oferi utilizatorilor comenzi rapide suplimentare pentru a naviga direct la elementul pliabil în sine.

Rețineți că implementarea actuală a Bootstrap nu acoperă diferitele interacțiuni de la tastatură descrise în modelul de acordeon al Ghidului de practici de autor ARIA - va trebui să le includeți singur cu JavaScript personalizat.

Utilizare

Pluginul de colaps folosește câteva clase pentru a face față sarcinilor grele:

• .collapseascunde conținutul
• .collapse.showarata continutul
• .collapsingeste adăugată când începe tranziția și eliminată când se termină

Aceste clase pot fi găsite în _transitions.scss.

Prin atribute de date

Doar adăugați data-toggle="collapse"și data-targeta elementului pentru a atribui automat controlul unuia sau mai multor elemente pliabile. Atributul data-targetacceptă un selector CSS pentru a aplica restrângerea. Asigurați-vă că adăugați clasa collapsela elementul pliabil. Dacă doriți să se deschidă implicit, adăugați clasa suplimentară show.

Pentru a adăuga un management de grup asemănător unui acordeon într-o zonă pliabilă, adăugați atributul de date data-parent="#selector". Consultați demonstrația pentru a vedea acest lucru în acțiune.

Prin JavaScript

Activați manual cu:

$('.collapse').collapse()

Opțiuni

Opțiunile pot fi transmise prin atribute de date sau JavaScript. Pentru atributele datelor, adăugați numele opțiunii la data-, ca în data-parent="".

Metode

.collapse(options)

Activează conținutul dvs. ca element pliabil. Acceptă opțiuni opționale object.

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

.collapse('toggle')

Comută un element pliabil la afișat sau ascuns. Se întoarce la apelant înainte ca elementul pliabil să fi fost efectiv afișat sau ascuns (adică înainte ca evenimentul shown.bs.collapsesau să hidden.bs.collapseapară).

.collapse('show')

Afișează un element pliabil. Se întoarce la apelant înainte ca elementul pliabil să fie afișat efectiv (adică înainte de apariția shown.bs.collapseevenimentului).

.collapse('hide')

Ascunde un element pliabil. Se întoarce la apelant înainte ca elementul pliabil să fi fost efectiv ascuns (adică înainte de apariția hidden.bs.collapseevenimentului).

.collapse('dispose')

Distruge prăbușirea unui element.

Evenimente

Clasa de colaps a lui Bootstrap expune câteva evenimente pentru conectarea la funcționalitatea de colaps.

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