Kaw

Nws ua haujlwm li cas

Lub cev qhuav dej JavaScript plugin yog siv los qhia thiab zais cov ntsiab lus. Cov nyees khawm lossis cov thauj tog rau nkoj yog siv los ua cov cim uas tau teeb tsa rau cov ntsiab lus tshwj xeeb uas koj hloov pauv. Collapsing ib lub caij yuav animate heightlos ntawm nws cov nqi tam sim no rau 0. Muab CSS ua haujlwm li cas rau cov animations, koj siv tsis tau paddingntawm ib lub .collapsecaij. Hloov chaw, siv cov chav kawm ua ib qho kev nthuav dav ntawm cov ntaub qhwv.

Piv txwv

Nyem rau cov nyees khawm hauv qab no los qhia thiab zais lwm lub ntsiab lus ntawm kev hloov hauv chav kawm:

• .collapsezais cov ntsiab lus
• .collapsingyog siv thaum lub sij hawm hloov
• .collapse.showqhia cov ntsiab lus

Feem ntau, peb pom zoo kom siv lub pob nrog tus data-bs-targetcwj pwm. Thaum tsis pom zoo los ntawm qhov kev xav ntawm qhov pom, koj tuaj yeem siv qhov txuas nrog tus hrefcwj pwm (thiab a role="button"). Hauv ob qho xwm txheej, qhov data-bs-toggle="collapse"yuav tsum tau ua.

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

Kab rov tav

Lub collapse plugin kuj txhawb txoj kab rov tav collapsing. Ntxiv cov .collapse-horizontalchav kawm hloov kho kom hloov pauv qhov hloov pauv widththiab heightteeb tsa tus widthme nyuam tam sim ntawd. Xav tias dawb sau koj tus kheej kev cai Sass, siv inline styles, lossis siv peb cov khoom siv dav dav .

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

Ntau lub hom phiaj

Ib <button>lossis <a>tuaj yeem qhia thiab zais ntau lub ntsiab lus los ntawm kev xa lawv nrog tus xaiv hauv nws hreflossis data-bs-targettus cwj pwm. Ntau <button>lossis <a>tuaj yeem qhia thiab zais ib lub ntsiab lus yog tias lawv txhua tus siv nrog lawv hreflossis data-bs-targettus cwj pwm

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

Kev siv tau

Nco ntsoov ntxiv aria-expandedrau lub caij tswj. Cov cwj pwm no qhia meej meej txog lub xeev tam sim no ntawm lub caij sib tsoo khi rau kev tswj kom tshuaj xyuas cov nyeem thiab cov cuab yeej zoo sib xws. Yog tias lub caij collapsible raug kaw los ntawm lub neej ntawd, tus cwj pwm ntawm cov khoom tswj yuav tsum muaj tus nqi ntawm aria-expanded="false". Yog tias koj tau teeb tsa lub caij collapsible kom qhib los ntawm lub neej ntawd siv cov showchav kawm, teem caij aria-expanded="true"rau kev tswj hwm. Lub plugin yuav cia li toggle tus cwj pwm no ntawm kev tswj xyuas raws li seb puas tau qhib lossis kaw (ntawm JavaScript, lossis vim tias tus neeg siv tau ua rau lwm qhov kev tswj hwm tseem khi rau tib lub caij sib tsoo). Yog hais tias tus tswj hwm lub ntsiab HTML tsis yog khawm (piv txwv li, ib qho <a>lossis <div>), tus cwj pwmrole="button"yuav tsum tau ntxiv rau lub caij.

Yog tias koj lub ntsiab tswj yog tsom rau ib qho kev sib tsoo - piv txwv li tus data-bs-targetcwj pwm yog taw tes rau tus idxaiv - koj yuav tsum ntxiv tus aria-controlscwj pwm rau cov khoom tswj, uas muaj cov idkhoom sib tsoo. Cov ntawv nyeem niaj hnub no thiab cov thev naus laus zis zoo sib xws ua rau siv cov cwj pwm no los muab cov neeg siv nrog cov shortcuts ntxiv rau kev taw qhia ncaj qha rau lub caij sib tsoo nws tus kheej.

Nco ntsoov tias Bootstrap qhov kev siv tam sim no tsis suav nrog ntau yam kev xaiv keyboard sib cuam tshuam tau piav qhia hauv ARIA Authoring Practices Guide accordion pattern - koj yuav tsum suav nrog koj tus kheej nrog kev cai JavaScript.

Sass

Hloov pauv

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

Cov chav kawm

Collapse hloov cov chav kawm tuaj yeem pom nyob rau hauv scss/_transitions.scssraws li cov no tau muab faib thoob plaws ntau yam (collapse thiab accordion).

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

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

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

Kev siv

Lub cev qhuav dej siv ob peb chav kawm los daws qhov hnyav nqa:

• .collapsezais cov ntsiab lus
• .collapse.showqhia cov ntsiab lus
• .collapsingntxiv thaum qhov kev hloov pauv pib, thiab tshem tawm thaum nws tiav

Cov chav kawm no tuaj yeem pom hauv _transitions.scss.

Los ntawm cov ntaub ntawv attributes

Tsuas yog ntxiv data-bs-toggle="collapse"thiab ib qho data-bs-targetrau lub caij kom tau txais kev tswj hwm ntawm ib lossis ntau lub ntsiab lus collapsible. Tus data-bs-targetcwj pwm lees txais CSS xaiv los siv lub cev qhuav dej rau. Nco ntsoov ntxiv cov chav kawm collapserau lub caij collapsible. Yog tias koj xav kom nws qhib lub neej ntawd, ntxiv cov chav kawm ntxiv show.

Txhawm rau ntxiv accordion-zoo li pab pawg tswj hwm rau thaj tsam collapsible, ntxiv cov ntaub ntawv tus cwj pwm data-bs-parent="#selector". Xa mus rau nplooj ntawv accordion kom paub ntau ntxiv.

Ntawm JavaScript

Qhib manually nrog:

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

Kev xaiv

Raws li kev xaiv tuaj yeem dhau los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript, koj tuaj yeem ntxiv ib qho kev xaiv npe rau data-bs-, xws li hauv data-bs-animation="{value}". Nco ntsoov hloov cov ntaub ntawv ntawm lub npe xaiv los ntawm " camelCase " mus rau " kebab-case " thaum dhau cov kev xaiv ntawm cov ntaub ntawv cwj pwm. Piv txwv li, siv data-bs-custom-class="beautifier"es tsis txhob data-bs-customClass="beautifier".

Raws li ntawm Bootstrap 5.2.0, tag nrho cov khoom txhawb nqa qhov kev sim khaws tseg cov ntaub ntawv tus cwj pwm data-bs-configuas tuaj yeem ua tsev yooj yim kev teeb tsa raws li JSON txoj hlua. Thaum ib qho khoom muaj data-bs-config='{"delay":0, "title":123}'thiab data-bs-title="456"tus cwj pwm, tus titlenqi kawg yuav yog 456thiab cov ntaub ntawv sib cais yuav dhau los ntawm cov txiaj ntsig tau muab rau data-bs-config. Ntxiv mus, cov ntaub ntawv uas twb muaj lawm muaj peev xwm ua tsev JSON qhov tseem ceeb xws li data-bs-delay='{"show":0,"hide":150}'.

Cov txheej txheem

Activates koj cov ntsiab lus raws li ib tug collapsible caij. Txais ib qho kev xaiv xaiv object.

Koj tuaj yeem tsim qhov sib tsoo nrog tus tsim, piv txwv li:

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

Cov xwm txheej

Bootstrap's collapse class exposes ob peb txheej xwm rau hooking mus rau hauv vau functionality.

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})