Source

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

Puteți folosi un link cu hrefatributul sau un buton cu data-targetatributul. În ambele cazuri, data-toggle="collapse"este necesar.

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>

Ț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

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>

Exemplu de acordeon

Folosind componenta card , puteți extinde comportamentul de restrângere implicit pentru a crea un acordeon.

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 lupul lună tempor, sunt aliqua pune o pasăre pe ea calmar cafea de origine nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur macelar vice lomo. Jambiere occaecat bere artizanală de la fermă la masă, denim crud estetic synth nesciunt probabil că n-ai auzit de ei acuzamus labore sustenabil 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>

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 deschis sau închis sau nu (prin JavaScript sau pentru că utilizatorul a declanșat un alt element de control legat de același element restrâns). 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 WAI-ARIA Authoring Practices 1.1 - 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="".

Nume Tip Mod implicit Descriere
mamă selector | obiect jQuery | element DOM fals Dacă este furnizat elementul părinte, atunci toate elementele pliabile de sub părintele specificat vor fi închise atunci când este afișat acest element pliabil. (similar cu comportamentul tradițional la acordeon - acesta depinde de cardclasă). Atributul trebuie setat pe zona țintă pliabilă.
comutare boolean Adevărat Comută elementul pliabil la invocare

Metode

Metode și tranziții asincrone

Toate metodele API sunt asincrone și încep o tranziție . Ei revin la apelant imediat ce tranziția este începută, dar înainte ca aceasta să se încheie . În plus, un apel de metodă pentru o componentă de tranziție va fi ignorat .

Consultați documentația noastră JavaScript pentru mai multe informații.

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

Tip de eveniment Descriere
arată.bs.colaps Acest eveniment se declanșează imediat când showeste apelată metoda instanței.
arătat.bs.colaps Acest eveniment este declanșat atunci când un element de restrângere a fost făcut vizibil pentru utilizator (va aștepta finalizarea tranzițiilor CSS).
ascunde.bs.colaps Acest eveniment este declanșat imediat când hidemetoda a fost apelată.
ascuns.bs.colaps Acest eveniment este declanșat atunci când un element de restrângere a fost ascuns utilizatorului (va aștepta finalizarea tranzițiilor CSS). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})