Kolaps
Uključite vidljivost sadržaja u cijelom projektu pomoću nekoliko klasa i naših JavaScript dodataka.
Kliknite na dugmad ispod da prikažete i sakrijete drugi element putem promjena klase:
.collapsesakriva sadržaj.collapsingprimjenjuje se tokom prijelaza.collapse.showprikazuje sadržaj
Možete koristiti vezu sa hrefatributom ili dugme sa data-targetatributom. U oba slučaja data-toggle="collapse"je potrebno.
<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>A <button>ili <a>može prikazati i sakriti više elemenata upućivanjem na njih pomoću JQuery selektora u svom hrefili data-targetatributu. Višestruki <button>ili <a>mogu prikazati i sakriti element ako svaki od njih referencira sa svojim hrefili data-targetatributom
<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>Koristeći komponentu kartice , možete proširiti zadano ponašanje sažimanja kako biste stvorili harmoniku.
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" 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="#accordion">
<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" 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="#accordion">
<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" 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="#accordion">
<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>Obavezno dodajte aria-expandedkontrolni element. Ovaj atribut eksplicitno prenosi trenutno stanje sklopivog elementa povezanog s kontrolom na čitače ekrana i slične pomoćne tehnologije. Ako je sklopivi element zatvoren prema zadanim postavkama, atribut na kontrolnom elementu trebao bi imati vrijednost aria-expanded="false". Ako ste postavili da sklopivi element bude otvoren prema zadanim postavkama pomoću showklase, aria-expanded="true"umjesto toga postavite na kontroli. Dodatak će automatski uključiti ovaj atribut na kontroli na osnovu toga da li je sklopivi element otvoren ili zatvoren (putem JavaScript-a, ili zato što je korisnik pokrenuo drugi kontrolni element koji je također vezan za isti sklopivi element). Ako HTML element kontrolnog elementa nije dugme (npr. <a>ili <div>), atributrole="button"treba dodati elementu.
Ako vaš kontrolni element cilja na jedan sklopivi element – tj. data-targetatribut pokazuje na idselektor – trebali biste dodati aria-controlsatribut kontrolnom elementu, koji sadrži idsklopivi element. Moderni čitači ekrana i slične pomoćne tehnologije koriste ovaj atribut kako bi korisnicima pružile dodatne prečice za navigaciju direktno do samog sklopivog elementa.
Imajte na umu da Bootstrap-ova trenutna implementacija ne pokriva različite interakcije sa tastaturom opisane u WAI-ARIA Authoring Practices 1.1 obrascu harmonike - morat ćete ih sami uključiti pomoću prilagođenog JavaScripta.
Dodatak za kolaps koristi nekoliko klasa za rukovanje teškim podizanjem:
.collapsesakriva sadržaj.collapse.showprikazuje sadržaj.collapsingse dodaje kada prijelaz počne, a uklanja se kada se završi
Ovi časovi se mogu naći u _transitions.scss.
Samo dodajte data-toggle="collapse"i a data-targetelementu da automatski dodijelite kontrolu nad jednim ili više sklopivih elemenata. Atribut data-targetprihvaća CSS selektor za primjenu kolapsa na. Obavezno dodajte klasu collapsesklopivom elementu. Ako želite da se zadano otvori, dodajte dodatnu klasu show.
Da biste dodali upravljanje grupama nalik harmonici u sklopivu oblast, dodajte atribut podataka data-parent="#selector". Pogledajte demo da vidite ovo na djelu.
Omogućite ručno pomoću:
$('.collapse').collapse()Opcije se mogu proslijediti putem atributa podataka ili JavaScript-a. Za atribute podataka dodajte naziv opcije u data-, kao u data-parent="".
| Ime | Tip | Default | Opis |
|---|---|---|---|
| roditelj | selektor | jQuery objekat | DOM element | false | Ako je naveden roditelj, tada će svi sklopivi elementi ispod navedenog nadređenog biti zatvoreni kada se prikaže ova sklopiva stavka. (slično tradicionalnom ponašanju harmonike - ovo zavisi od cardklase). Atribut se mora postaviti na ciljno sklopivo područje. |
| preklopiti | boolean | tačno | Uključuje sklopivi element pri pozivanju |
Asinhrone metode i prijelazi
Sve API metode su asinhrone i pokreću tranziciju . Oni se vraćaju pozivaocu čim prijelaz započne, ali prije nego što se završi . Osim toga, poziv metode na prelaznu komponentu će biti zanemaren .
Pogledajte našu JavaScript dokumentaciju za više informacija.
Aktivira vaš sadržaj kao sklopivi element. Prihvata opcione opcije object.
$('#myCollapsible').collapse({
toggle: false
})Prebacuje sklopivi element na prikazan ili skriven. Vraća pozivaocu prije nego što je sklopivi element zapravo prikazan ili sakriven (tj. prije nego se dogodi događaj shown.bs.collapseili ).hidden.bs.collapse
Prikazuje sklopivi element. Vraća pozivaocu prije nego što je sklopivi element zapravo prikazan (tj. prije nego što se shown.bs.collapsedogađaj dogodi).
Sakriva sklopivi element. Vraća se pozivaocu prije nego što je sklopivi element zapravo skriven (tj. prije nego što se hidden.bs.collapsedogađaj dogodi).
Uništava kolaps elementa.
Bootstrapova klasa kolapsa izlaže nekoliko događaja za spajanje na funkcionalnost kolapsa.
| Vrsta događaja | Opis |
|---|---|
| show.bs.collapse | Ovaj događaj se aktivira odmah kada showse pozove metoda instance. |
| prikazano.bs.collapse | Ovaj događaj se pokreće kada se element sažimanja učini vidljivim korisniku (će pričekati da se CSS prijelazi dovrše). |
| hide.bs.collapse | Ovaj događaj se pokreće odmah kada je hidemetoda pozvana. |
| hidden.bs.collapse | Ovaj događaj se pokreće kada je element sažimanja skriven od korisnika (će čekati da se CSS prijelazi dovrše). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something…
})