kolaps
Prepnite viditeľnosť obsahu vo svojom projekte pomocou niekoľkých tried a našich doplnkov JavaScript.
Kliknutím na tlačidlá nižšie zobrazíte a skryjete ďalší prvok prostredníctvom zmien triedy:
.collapseskrýva obsah.collapsingsa aplikuje pri prechodoch.collapse.showzobrazuje obsah
Môžete použiť odkaz s hrefatribútom alebo tlačidlo s data-targetatribútom. V oboch prípadoch data-toggle="collapse"sa vyžaduje.
<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>alebo <a>môže zobraziť a skryť viacero prvkov odkazovaním na selektor JQuery vo svojom atribúte hrefalebo . data-targetViacnásobné <button>alebo <a>môžu zobraziť a skryť prvok, ak naň každý odkazuje svojím atribútom hrefalebo data-targetatribútom
<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>Pomocou komponentu karty môžete rozšíriť predvolené správanie pri zbalení na vytvorenie akordeónu.
<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>Nezabudnite pridať aria-expandeddo ovládacieho prvku. Tento atribút explicitne vyjadruje aktuálny stav skladacieho prvku spojeného s ovládacím prvkom čítačkám obrazovky a podobným asistenčným technológiám. Ak je skladací prvok predvolene zatvorený, atribút ovládacieho prvku by mal mať hodnotu aria-expanded="false". Ak ste nastavili, aby bol skladací prvok predvolene otvorený pomocou showtriedy, nastavte aria-expanded="true"ho na ovládacom prvku. Doplnok automaticky prepne tento atribút na ovládacom prvku na základe toho, či bol alebo nebol skladací prvok otvorený alebo zatvorený (prostredníctvom JavaScriptu, alebo pretože používateľ spustil iný ovládací prvok, ktorý je tiež viazaný na rovnaký zbaliteľný prvok). Ak prvkom HTML ovládacieho prvku nie je tlačidlo (napr. <a>alebo <div>), atribútrole="button"treba pridať k prvku.
Ak je váš ovládací prvok zacielený na jeden skladací prvok – tj data-targetatribút ukazuje na idselektor – mali by ste pridať aria-controlsatribút do ovládacieho prvku, ktorý obsahuje idskladací prvok. Moderné čítačky obrazovky a podobné asistenčné technológie využívajú tento atribút na to, aby používateľom poskytli ďalšie skratky na prechod priamo na samotný skladací prvok.
Všimnite si, že súčasná implementácia Bootstrapu nepokrýva rôzne interakcie s klávesnicou popísané vo vzore akordeónu WAI-ARIA Authoring Practices 1.1 – budete ich musieť zahrnúť sami s vlastným JavaScriptom.
Zásuvný modul používa niekoľko tried na zvládnutie ťažkého zdvíhania:
.collapseskrýva obsah.collapse.showzobrazuje obsah.collapsingsa pridá pri spustení prechodu a odstráni sa po jeho dokončení
Tieto triedy nájdete v _transitions.scss.
Stačí pridať data-toggle="collapse"a data-targetk prvku a automaticky priradiť ovládanie jedného alebo viacerých skladacích prvkov. Atribút data-targetakceptuje selektor CSS, na ktorý sa má použiť zbalenie. Nezabudnite pridať triedu collapsedo skladacieho prvku. Ak chcete, aby bola predvolene otvorená, pridajte ďalšiu triedu show.
Ak chcete do skladacej oblasti pridať správu skupiny podobnú akordeónu, pridajte atribút data data-parent="#selector". Pozrite si ukážku, aby ste to videli v akcii.
Povoliť manuálne pomocou:
$('.collapse').collapse()Možnosti môžu byť odovzdané prostredníctvom dátových atribútov alebo JavaScriptu. Pre atribúty údajov pripojte názov voľby k data-, ako v data-parent="".
| názov | Typ | Predvolené | Popis |
|---|---|---|---|
| rodič | volič | objekt jQuery | prvok DOM | falošný | Ak je poskytnutý nadradený prvok, všetky skladacie prvky pod zadaným nadradeným objektom sa po zobrazení tohto skladacieho prvku zatvoria. (podobné tradičnému správaniu na akordeóne - to závisí od cardtriedy). Atribút musí byť nastavený na cieľovú skladaciu oblasť. |
| prepnúť | boolovská hodnota | pravda | Prepína zbaliteľný prvok pri vyvolaní |
Asynchrónne metódy a prechody
Všetky metódy API sú asynchrónne a spúšťajú prechod . Vrátia sa k volajúcemu hneď po spustení prechodu, ale skôr, ako sa skončí . Okrem toho bude volanie metódy na prechodovom komponente ignorované .
Aktivuje váš obsah ako skladací prvok. Prijíma voliteľné možnosti object.
$('#myCollapsible').collapse({
toggle: false
})Prepne zbaliteľný prvok na zobrazený alebo skrytý. Vráti sa k volajúcemu skôr, ako sa skladací prvok skutočne zobrazí alebo skryje (tj predtým, ako nastane udalosť shown.bs.collapsealebo ).hidden.bs.collapse
Zobrazuje skladací prvok. Vráti sa k volajúcemu skôr, ako sa skladací prvok skutočne zobrazí (tj pred výskytom shown.bs.collapseudalosti).
Skryje skladací prvok. Vráti sa k volajúcemu skôr, ako bol skladací prvok skutočne skrytý (tj predtým, ako hidden.bs.collapsedôjde k udalosti).
Zničí kolaps prvku.
Trieda zbalenia Bootstrapu odhaľuje niekoľko udalostí na pripojenie k funkcii zbalenia.
| Typ udalosti | Popis |
|---|---|
| show.bs.kolaps | Táto udalosť sa spustí okamžite po showzavolaní metódy inštancie. |
| zobrazené.bs.kolaps | Táto udalosť sa spustí, keď je prvok zbalenia viditeľný pre používateľa (bude čakať na dokončenie prechodov CSS). |
| skryť.bs.kolaps | Táto udalosť sa spustí okamžite po hidezavolaní metódy. |
| skrytý.bs.kolaps | Táto udalosť sa spustí, keď bol prvok zbalenia skrytý pred používateľom (bude čakať na dokončenie prechodov CSS). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something…
})