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.

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-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-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">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

Ne tɛtrɛtɛ mu

Collapse plugin no nso boa horizontal collapsing. Fa .widthmodifier class no ka ho ma nsakrae no widthmmom heightna hyehyɛ a widthwɔ ntɛm ara abofra element no so. Fa ahofadi kyerɛw w’ankasa Sass a wopɛ, fa inline styles di dwuma, anaa fa yɛn width utilities no di dwuma .

<p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse width" id="collapseWidthExample">
    <div class="card card-body" style="width: 320px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </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">
        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>

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 btn-block text-left" 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">
        Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left 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">
        Some placeholder content for the second accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left 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">
        And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
      </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ɔ ARIA Authoring Practices Guide accordion pattern 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="".

Akwan a wɔfa so yɛ

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

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})