Kolapso
Ŝaltu la videblecon de enhavo tra via projekto per kelkaj klasoj kaj niaj JavaScript-kromaĵoj.
Alklaku la subajn butonojn por montri kaj kaŝi alian elementon per klasŝanĝoj:
.collapsekaŝas enhavon.collapsingestas aplikata dum transiroj.collapse.showmontras enhavon
Vi povas uzi ligilon kun la hrefatributo, aŭ butonon kun la data-targetatributo. En ambaŭ kazoj, la data-toggle="collapse"estas postulata.
<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>aŭ <a>povas montri kaj kaŝi plurajn elementojn referencante ilin per JQuery-elektilo en ĝia hrefaŭ data-targetatributo. Multoblaj <button>aŭ <a>povas montri kaj kaŝi elementon se ili ĉiu referencas ĝin per sia hrefaŭ data-targetatributo
<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>Uzante la kartkomponenton , vi povas etendi la defaŭltan kolapsan konduton por krei akordionon.
<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>Nepre aldonu aria-expandedal la kontrolelemento. Ĉi tiu atributo eksplicite transdonas la nunan staton de la faldebla elemento ligita al la kontrolo al ekranlegantoj kaj similaj helpaj teknologioj. Se la faldebla elemento estas fermita defaŭlte, la atributo sur la kontrolelemento devus havi valoron de aria-expanded="false". Se vi agordis la faldeblan elementon por esti malfermita defaŭlte uzante la showklason, aria-expanded="true"anstataŭe agordu la kontrolon. La kromaĵo aŭtomate ŝaltos ĉi tiun atributon sur la kontrolo surbaze de ĉu aŭ ne la faldebla elemento estis malfermita aŭ fermita (per JavaScript, aŭ ĉar la uzanto ekigis alian kontrolelementon ankaŭ ligitan al la sama faldebla elemento). Se la HTML-elemento de la kontrolelemento ne estas butono (ekz., an <a>aŭ <div>), la atributorole="button"devus esti aldonita al la elemento.
Se via kontrolelemento celas ununuran faldeblan elementon - te la data-targetatributo montras al idelektilo - vi devus aldoni la aria-controlsatributon al la kontrolelemento, enhavanta la idde la faldebla elemento. Modernaj ekranlegiloj kaj similaj helpaj teknologioj uzas ĉi tiun atributon por provizi uzantojn per kromaj ŝparvojoj por navigi rekte al la faldebla elemento mem.
Notu, ke la nuna efektivigo de Bootstrap ne kovras la diversajn klavarajn interagojn priskribitajn en la akordiona ŝablono WAI-ARIA Authoring Practices 1.1 - vi devos mem inkluzivi ĉi tiujn per kutima JavaScript.
La kolapsa kromaĵo uzas kelkajn klasojn por trakti la pezan ŝarĝon:
.collapsekaŝas la enhavon.collapse.showmontras la enhavon.collapsingestas aldonita kiam la transiro komenciĝas, kaj forigita kiam ĝi finiĝas
Tiuj ĉi klasoj troviĝas en _transitions.scss.
Nur aldonu data-toggle="collapse"kaj a data-targetal la elemento por aŭtomate asigni kontrolon de unu aŭ pluraj faldeblaj elementoj. La data-targetatributo akceptas CSS-elektilon al kiu apliki la kolapson. Nepre aldonu la klason collapseal la faldebla elemento. Se vi ŝatus, ke ĝi defaŭlte malfermu, aldonu la aldonan klason show.
Por aldoni akordion-similan grupadministradon al faldebla areo, aldonu la datuman atributon data-parent="#selector". Riferu al la demo por vidi ĉi tion en ago.
Ebligu permane per:
$('.collapse').collapse()Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-, kiel en data-parent="".
| Nomo | Tajpu | Defaŭlte | Priskribo |
|---|---|---|---|
| gepatro | elektilo | jQuery objekto | DOM-elemento | malvera | Se gepatro estas provizita, tiam ĉiuj faldeblaj elementoj sub la specifita gepatro estos fermitaj kiam ĉi tiu faldebla ero montriĝas. (simila al tradicia akordiona konduto - tio dependas de la cardklaso). La atributo devas esti agordita sur la cela faldebla areo. |
| baskuli | bulea | vera | Ŝaltas la faldeblan elementon ĉe alvoko |
Nesinkronaj metodoj kaj transiroj
Ĉiuj API-metodoj estas nesinkronaj kaj komencas transiron . Ili revenas al la alvokanto tuj kiam la transiro estas komencita sed antaŭ ol ĝi finiĝas . Krome, metodovoko sur transira komponento estos ignorita .
Aktivigas vian enhavon kiel faldebla elemento. Akceptas laŭvolajn opciojn object.
$('#myCollapsible').collapse({
toggle: false
})Ŝaltas faldebla elemento al montrita aŭ kaŝita. Revenas al la alvokanto antaŭ ol la faldebla elemento efektive estis montrita aŭ kaŝita (t.e. antaŭ ol okazas la shown.bs.collapseaŭ hidden.bs.collapseevento).
Montras faldeblan elementon. Revenas al la alvokanto antaŭ ol la faldebla elemento efektive montriĝis (te antaŭ ol la shown.bs.collapseevento okazas).
Kaŝas faldeblan elementon. Revenas al la alvokanto antaŭ ol la faldebla elemento efektive estis kaŝita (te antaŭ ol la hidden.bs.collapseevento okazas).
Detruas la kolapson de elemento.
La kolapsoklaso de Bootstrap elmontras kelkajn eventojn por hoki en kolapfunkciecon.
| Eventa Tipo | Priskribo |
|---|---|
| montri.bs.kolapso | Ĉi tiu evento tuj ekfunkciigas kiam la showekzempla metodo estas vokita. |
| montrita.bs.kolapso | Ĉi tiu okazaĵo estas pafita kiam kolapelemento fariĝis videbla por la uzanto (atendos ke CSS-transiroj finiĝos). |
| kaŝi.bs.kolapso | Ĉi tiu evento estas lanĉita tuj kiam la hidemetodo estas vokita. |
| kaŝita.bs.kolapso | Ĉi tiu okazaĵo estas pafita kiam kolapelemento estis kaŝita de la uzanto (atendos ke CSS-transiroj finiĝos). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something…
})