Twe kɔ emu nsɛm atitiriw no so Twe kɔ docs navigation so

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 padding.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

Mpɛn pii no, yɛkamfo kyerɛ sɛ fa bɔtn bi a ɛwɔ data-bs-targetsu no di dwuma. Bere a wɔmfa nkamfo nkyerɛ wɔ nkyerɛase kwan so no, wubetumi nso de link a ɛwɔ hrefsu no (ne a role="button") adi dwuma. Wɔ nsɛm abien no nyinaa mu no, data-bs-toggle="collapse"wɔhwehwɛ sɛ wɔyɛ saa.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </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 reference a ɔde paw nea ɛwɔ ne hrefanaa data-bs-targetsu no 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-bs-targetattribute kyerɛ no a

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-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">
        Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </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 anaa 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 so). 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-bs-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 wopɛ 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.

Sass

Nneɛma a Ɛsakra

$transition-collapse:         height .35s ease;

Adesua ahorow

Wobetumi ahu collapse nsakrae adesua ahorow wɔ mu scss/_transitions.scsssɛnea eyinom kyɛ wɔ nneɛma pii mu (collapse ne accordion).

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);
}

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-bs-toggle="collapse"ne a data-bs-targetka element no ho ma automatically assign control of one or more collapsible elements. Attribute no data-bs-targetgye CSS selector bi 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 nhyehyɛe a ɛte sɛ accordion bɛka beae a wotumi bubu mu ho a, fa data su no ka ho data-bs-parent="#selector". Hwɛ demo no na woahu eyi wɔ adeyɛ mu.

Ɛdenam JavaScript so

Fa nsa yɛ adwuma denam:

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

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-bs-, sɛnea ɛwɔ data-bs-parent="".

Din Korɔ Mfiaseɛ Nkyerɛmu
parent nea ɔpaw | jAsɛmmisa adeɛ | DOM element a ɛwɔ hɔ false 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. (te sɛ atetesɛm accordion suban - eyi gyina cardadesuakuw no so). Ɛsɛ sɛ wɔde su no si beae a wobetumi abubu no wɔ botae no so.
toggle boolean ho asɛm true 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 . Nea ɛka ho no, wobebu ani agu ɔkwan a wɔfa so frɛ ade bi a ɛrekɔ so no so .

Hwɛ yɛn JavaScript nkrataa no na woanya nsɛm pii .

Ɛma wo nsɛm no yɛ adwuma sɛ ade a wotumi bu mu. Gye akwan a wubetumi apaw bi tom object.

Wubetumi de constructor no ayɛ collapse instance, sɛ nhwɛso no:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
Ɔkwan Nkyerɛmu
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).
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 (sɛ nhwɛso no, ansa na shown.bs.collapseasɛm no asi).
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 no asie ankasa (sɛ nhwɛso no, ansa na hidden.bs.collapseasɛm no asi).
dispose Ɔsɛe element bi a ɛrehwe ase. (Eyi data a wɔde asie wɔ DOM element no so)
getInstance Static kwan a ɛma wo kwan ma wo nya collapse instance a ɛbata DOM element bi ho no, wubetumi de adi dwuma sɛnea eyi te:bootstrap.Collapse.getInstance(element)
getOrCreateInstance Static kwan a ɛsan de collapse instance a ɛbata DOM element bi ho anaasɛ ɛbɔ foforo sɛ ɛba sɛ wɔanhyɛ aseɛ a. Wubetumi de adi dwuma sɛnea ɛte yi:bootstrap.Collapse.getOrCreateInstance(element)

Nsɛm a esisi

Bootstrap no collapse adesua no da nsɛm kakraa bi a esisi ma hooking kɔ collapse dwumadi mu adi.

Adeyɛ no su Nkyerɛmu
show.bs.collapse Saa adeyɛ yi tow ntɛm ara bere a showwɔfrɛ instance kwan no.
shown.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.collapse Wɔtow saa adeyɛ yi ntɛm ara bere a hidewɔafrɛ ɔkwan no awie no.
hidden.bs.collapse 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).
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})