Gu
Fa adesua kakraa bi ne yɛn JavaScript plugins no sesa nneɛma a wotumi hu wɔ wo dwumadi no nyinaa mu.
Sɛnea ɛyɛ adwuma
Collapse JavaScript plugin no na wɔde kyerɛ na wɔde sie nsɛm a ɛwɔ mu. Wɔde bɔton anaa ankora di dwuma sɛ triggers a wɔde map ayɛ nneɛma pɔtee bi a wodannan no. Sɛ wobubu element bi a, ɛbɛma woanya nkwa heightafi ne bo a ɛsom mprempren no so akɔ 0. Sɛ wode sɛnea CSS di animations ho dwuma a, wuntumi mfa nni dwuma paddingwɔ .collapseelement bi so. Mmom no, fa adesuakuw no di dwuma sɛ ade a wɔde kyekyere nneɛma ho a ɛde ne ho.
Animation nkɛntɛnso a ɛwɔ saa ade yi mu no gyina prefers-reduced-motionmedia asɛmmisa no so. Hwɛ yɛn akwan a wɔfa so nya nneɛma ho nkrataa no fã a wɔatew so no .
Nhwɛsoɔ
Klik buttons a ɛwɔ aseɛ ha no so na kyerɛ na fa element foforɔ bi sie denam class nsakraeɛ so:
.collapsede nsɛm a ɛwɔ mu no sie.collapsingwɔde di dwuma wɔ nsakrae ahorow mu.collapse.showkyerɛ emu nsɛm
Wubetumi de link a ɛwɔ hrefattribute no adi dwuma, anaasɛ button a ɛwɔ data-targetattribute no. Wɔ nsɛm abien no nyinaa mu no, data-toggle="collapse"wɔhwehwɛ sɛ wɔyɛ saa.
<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>Nneɛma pii a wɔde asi wɔn ani so
A <button>anaa <a>betumi akyerɛ na ɔde nneɛma pii asie denam JQuery selector a ɔde bɛkyerɛkyerɛ mu wɔ ne hrefanaa data-targetattribute mu no so. Multiple <button>anaasɛ <a>wobetumi akyerɛ na wɔde element bi asie sɛ wɔn mu biara de wɔn hrefanaa data-targetattribute kyerɛ no a
<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>Accordion ho nhwɛso
Sɛ wode card component no di dwuma a, wubetumi atrɛw default collapse behavior no mu de ayɛ accordion. Sɛnea ɛbɛyɛ a wubenya accordion kwan no yiye no, hwɛ hu sɛ wode bedi dwuma .accordionsɛ ade a wɔde kyekyere nneɛma ho.
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 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>
</h2>
</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">
<h2 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>
</h2>
</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">
<h2 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>
</h2>
</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>Nneɛma a wotumi nya
Hwɛ hu sɛ wode bi bɛka aria-expandedcontrol element no ho. Saa su yi da mprempren tebea a ɛwɔ ade a ɛtumi hwe ase a wɔakyekyere no wɔ control no ho no adi pefee ma screen akenkanfo ne mfiridwuma a ɛboa a ɛte saa ara. Sɛ wɔato element a ɛtumi collapsible no mu default so a, ɛsɛ sɛ attribute a ɛwɔ control element no so no nya boɔ a ɛyɛ aria-expanded="false". Sɛ woahyɛ collapsible element no sɛ ɛbɛbue default denam showclass no so a, fa aria-expanded="true"si control no so mmom. Plugin no bɛdannan saa su yi wɔ control no so ankasa a egyina sɛ ebia wɔabue anaasɛ wɔato mu anaasɛ wɔanto mu (ɛnam JavaScript so, anaasɛ esiane sɛ nea ɔde di dwuma no kanyan control element foforo a ɛsan nso kyekyere element koro no ara a wotumi bubu mu no ho). Sɛ control element no HTML element no nyɛ button (sɛ nhwɛso no, an <a>anaa <div>), attribute norole="button"ɛsɛ sɛ wɔde ka element no ho.
Sɛ wo control element no de n’ani si element baako a ɛtumi bu mu – kyerɛ sɛ, data-targetsu no rekyerɛ idselector bi a – ɛsɛ sɛ wode aria-controlsattribute no ka control element no ho, a ɛwɔ idof the collapsible element no mu. Nnɛyi screen akenkanfo ne mfiridwuma a ɛte saa a ɛboa no de saa su yi di dwuma de ma wɔn a wɔde di dwuma no nya akwan tiawa foforo a wɔbɛfa so akɔ element a wotumi bubu no ankasa so tẽẽ.
Hyɛ no nsow sɛ Bootstrap mprempren dwumadie no nkata keyboard nkitahodi ahodoɔ a wɔaka ho asɛm wɔ WAI-ARIA Authoring Practices 1.1 accordion nhwɛsoɔ no so - ɛho bɛhia sɛ w'ankasa wode yeinom bɛka JavaScript a wɔahyɛ da ayɛ ho.
Sɛnea wɔde di dwuma
Collapse plugin no de adesua kakraa bi di dwuma de di nneɛma a emu yɛ duru a wɔma so no ho dwuma:
.collapsede emu nsɛm no sie.collapse.showkyerɛ emu nsɛm no.collapsingwɔde ka ho bere a nsakrae no afi ase, na woyi fi hɔ bere a awie no
Wobetumi ahu saa adesua ahorow yi wɔ _transitions.scss.
Via data su ahorow so
Kɛkɛ fa data-toggle="collapse"ne a data-targetka element no ho ma automatically assign control of one or more collapsible elements. Attribute no data-targetgye CSS selector a wɔde collapse no bedi dwuma wɔ so. Hwɛ hu sɛ wode adesuakuw no bɛka collapseelement a wotumi bu no ho. Sɛ wopɛ sɛ ɛbue default a, fa adesua foforo no ka ho show.
Sɛ wode kuw sohwɛ a ɛte sɛ accordion bɛka beae a wotumi bubu ho a, fa data su no ka ho data-parent="#selector". Hwɛ demo no na woahu eyi wɔ adeyɛ mu.
Ɛdenam JavaScript so
Fa nsa yɛ adwuma denam:
$('.collapse').collapse()Nneɛma a wubetumi apaw
Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-, sɛnea ɛwɔ data-parent="".
| Din | Korɔ | Mfiaseɛ | Nkyerɛmu |
|---|---|---|---|
| ɔwofo | nea ɔpaw | jAsɛmmisa adeɛ | DOM element a ɛwɔ hɔ | ɛnyɛ ampa | Sɛ wɔde ɔwofoɔ ma a, ɛnde wɔbɛto nneɛma a ɛtumi boaboa ano nyinaa a ɛwɔ ɔwofoɔ a wɔakyerɛ no ase no mu berɛ a wɔakyerɛ saa adeɛ a ɛtumi boaboa ano yi. (a ɛte sɛ atetesɛm accordion suban - eyi gyina cardadesuakuw no so). Ɛsɛ sɛ wɔde attribute no si target collapsible area no so. |
| toggle no | boolean ho asɛm | nokorɛ | Toggles element a ɛyɛ collapsible wɔ invocation so |
Akwan a wɔfa so yɛ
Asynchronous akwan ne nsakrae ahorow
API akwan nyinaa yɛ asynchronous na ɛhyɛ nsakrae ase . Wɔsan kɔ nea ɔfrɛɛ no no nkyɛn bere a wɔafi nsakrae no ase ara pɛ nanso ansa na aba awiei . Bio nso, wobebu ani agu ɔkwan a wɔfa so frɛ ade bi a ɛresakra so no so .
.collapse(options)
Ɛma wo nsɛm no yɛ adwuma sɛ ade a wotumi bu mu. Gye akwan a wubetumi apaw bi tom object.
$('#myCollapsible').collapse({
toggle: false
}).collapse('toggle')
Toggles a collapsible element ma wɔakyerɛ anaa wɔde asie. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ element a wotumi bubu no ankasa anaa wɔde asie (kyerɛ sɛ ansa na shown.bs.collapseanaa hidden.bs.collapseadeyɛ no aba).
.collapse('show')
Kyerɛ element bi a ɛtumi hwe ase. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ element a wotumi bubu mu no ankasa (kyerɛ sɛ ansa na shown.bs.collapseasɛm no asi).
.collapse('hide')
Ɛde element bi a wotumi bubu mu sie. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔde element a wotumi bubu mu no asie ankasa (kyerɛ sɛ ansa na hidden.bs.collapseasɛm no asi).
.collapse('dispose')
Ɔsɛe element bi a ɛrehwe ase.
Nsɛm a esisi
Bootstrap no collapse adesua no da nsɛm kakraa bi a esisi ma hooking kɔ collapse dwumadi mu adi.
| Nsɛm a Ɛsisii no Su | Nkyerɛmu |
|---|---|
| kyerɛ.bs.collapse | Saa adeyɛ yi tow ntɛm ara bere a showwɔfrɛ instance kwan no. |
| wɔakyerɛ.bs.collapse | Wɔtow saa adeyɛ yi bere a wɔayɛ collapse element bi a ɔde di dwuma no ahu (bɛtwɛn ma CSS nsakrae ahorow no awie). |
| hide.bs.asɛm a wɔde sie | Wɔtow saa adeyɛ yi ntɛm ara bere a hidewɔafrɛ ɔkwan no awie no. |
| ahintaw.bs.abɔ | Wɔtow saa adeyɛ yi bere a wɔde collapse element bi asie nea ɔde di dwuma no (bɛtwɛn ma CSS nsakrae ahorow no awie). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})