Kolaps
Uključite/isključite vidljivost sadržaja u svom projektu pomoću nekoliko klasa i naših JavaScript dodataka.
Pritisnite donje gumbe za prikaz ili skrivanje drugog elementa putem promjena klase:
.collapseskriva sadržaj.collapsingprimjenjuje se tijekom prijelaza.collapse.showprikazuje sadržaj
Možete koristiti vezu s hrefatributom ili gumb s data-targetatributom. U oba slučaja data-toggle="collapse"potrebno je.
<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 referenciranjem na njih s JQuery selektorom u svom hrefili data-targetatributu. Višestruki <button>ili <a>mogu prikazati i sakriti element ako svaki od njih upućuje na njega 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 da 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-expandedu kontrolni element. Ovaj atribut eksplicitno prenosi trenutačno stanje sklopivog elementa povezanog s kontrolom čitačima zaslona i sličnim pomoćnim tehnologijama. Ako je sklopivi element zatvoren prema zadanim postavkama, atribut na kontrolnom elementu trebao bi imati vrijednost aria-expanded="false". Ako ste sklopivi element postavili da bude otvoren prema zadanim postavkama pomoću showklase, aria-expanded="true"umjesto toga postavite na kontrolu. Dodatak će automatski prebaciti ovaj atribut na kontrolu na temelju toga je li sklopivi element otvoren ili zatvoren (preko JavaScripta ili zato što je korisnik pokrenuo drugi kontrolni element također vezan za isti sklopivi element). Ako HTML element kontrolnog elementa nije gumb (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 u kontrolni element koji sadrži idelement sklopivog elementa. Moderni čitači zaslona i slične pomoćne tehnologije koriste ovaj atribut kako bi korisnicima pružili dodatne prečace za izravnu navigaciju do samog sklopivog elementa.
Imajte na umu da trenutna implementacija Bootstrapa ne pokriva različite interakcije tipkovnice opisane u obrascu harmonike WAI-ARIA Authoring Practices 1.1 - morat ćete ih sami uključiti s prilagođenim JavaScriptom.
Dodatak za kolapsiranje koristi nekoliko klasa za rukovanje teškim dizanjem:
.collapseskriva sadržaj.collapse.showprikazuje sadržaj.collapsingdodaje se kada prijelaz započne, a uklanja se kada završi
Ove se klase mogu pronaći u _transitions.scss.
Samo dodajte data-toggle="collapse"i data-targetelementu da biste automatski dodijelili kontrolu nad jednim ili više sklopivih elemenata. Atribut data-targetprihvaća CSS selektor na koji se primjenjuje sažimanje. Obavezno dodajte klasu collapsesklopivom elementu. Ako želite da se prema zadanim postavkama otvori, dodajte dodatnu klasu show.
Za dodavanje grupnog upravljanja poput harmonike u sklopivi prostor dodajte atribut podataka data-parent="#selector". Pogledajte demo kako biste vidjeli ovo na djelu.
Omogućite ručno pomoću:
$('.collapse').collapse()Opcije se mogu proslijediti putem atributa podataka ili JavaScripta. Za atribute podataka dodajte naziv opcije u data-, kao u data-parent="".
| Ime | Tip | Zadano | Opis |
|---|---|---|---|
| roditelj | selektor | jQuery objekt | DOM element | lažno | Ako je naveden nadređeni element, tada će svi sklopivi elementi pod navedenim nadređenim elementom biti zatvoreni kada se prikaže ova sklopiva stavka. (slično tradicionalnom ponašanju harmonike - ovo ovisi o cardklasi). Atribut mora biti postavljen na ciljno sklopivo područje. |
| prebaciti | Booleov | pravi | Prebacuje sklopivi element na poziv |
Asinkrone metode i prijelazi
Sve API metode su asinkrone i pokreću prijelaz . Vraćaju se pozivatelju čim prijelaz započne, ali prije nego što završi . Osim toga, poziv metode na prijelaznoj komponenti bit će zanemaren .
Pogledajte našu JavaScript dokumentaciju za više informacija.
Aktivira vaš sadržaj kao sklopivi element. Prihvaća izborne opcije object.
$('#myCollapsible').collapse({
toggle: false
})Prebacuje sklopivi element na prikazan ili skriven. Vraća se pozivatelju prije nego što se sklopivi element stvarno prikaže ili sakrije (tj. prije nego što se dogodi događaj shown.bs.collapseili ).hidden.bs.collapse
Prikazuje sklopivi element. Vraća se pozivatelju prije nego što se sklopivi element stvarno prikaže (tj. prije nego što se shown.bs.collapsedogađaj dogodi).
Skriva sklopivi element. Vraća se pozivatelju prije nego što je sklopivi element zapravo skriven (tj. prije nego što se hidden.bs.collapsedogađaj dogodi).
Uništava kolaps elementa.
Bootstrapova kolaps klasa izlaže nekoliko događaja za spajanje na kolaps funkcionalnost.
| Vrsta događaja | Opis |
|---|---|
| pokazati.bs.srušiti | Ovaj događaj aktivira se odmah kada showse pozove metoda instance. |
| prikazano.bs.srušiti | Ovaj se događaj pokreće kada se element sažimanja učini vidljivim korisniku (pričekat će da se CSS prijelazi završe). |
| sakriti.bs.srušiti | Ovaj događaj se pokreće odmah nakon hidepoziva metode. |
| skriven.bs.srušiti | Ovaj se događaj pokreće kada je element sažimanja skriven od korisnika (pričekat će da se CSS prijelazi završe). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something…
})