Yeqela kokuqukethwe okuyinhloko Yeqela ku-docs navigation

Guqula ukubonakala kokuqukethwe kuyo yonke iphrojekthi yakho ngamakilasi ambalwa nama-plugin ethu e-JavaScript.

Isebenza kanjani

I-plugin ye-JavaScript yokugoqa isetshenziselwa ukubonisa nokufihla okuqukethwe. Izinkinobho noma amahange asetshenziswa njengezibangeli eziklanywe kuzinto ezithile ozishintshayo. Ukugoqa i-elementi kuzogqwayiza heightukusuka kunani layo lamanje kuye ku- 0. Uma kunikezwe ukuthi i-CSS iphatha kanjani ukugqwayiza, awukwazi ukusebenzisa paddingkusici .collapse. Kunalokho, sebenzisa ikilasi njengento yokugoqa ezimele.

Umthelela wokugqwayiza wale ngxenye uncike prefers-reduced-motionembuzweni wemidiya. Bona ingxenye yokunyakaza encishisiwe yemibhalo yethu yokufinyeleleka .

Isibonelo

Chofoza izinkinobho ezingezansi ukuze ubonise futhi ufihle enye into ngezinguquko zekilasi:

  • .collapseifihla okuqukethwe
  • .collapsingisetshenziswa ngesikhathi soshintsho
  • .collapse.showikhombisa okuqukethwe

Ngokuvamile, sincoma ukusebenzisa inkinobho data-bs-targetenesibaluli. Nakuba kunganconywa endaweni yokubuka ye-semantic, ungasebenzisa futhi isixhumanisi hrefesinesibaluli (kanye ne- role="button"). Kuzo zombili izimo, data-bs-toggle="collapse"kuyadingeka.

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>

Evundlile

I-plugin yokugoqa iphinde isekele ukugoqa okuvundlile. Engeza .collapse-horizontalikilasi lesilungisi ukuze uguqule i- widthesikhundleni heightbese usetha u width-elementi yengane eseduze. Zizwe ukhululekile ukubhala i-Sass yakho yangokwezifiso, sebenzisa izitayela ezisemgqeni, noma usebenzise izinsiza zethu zobubanzi .

Sicela uqaphele ukuthi nakuba isibonelo esingezansi min-heightsinesethi yokugwema ukupenda kabusha okudlulele kumadokhumenti ethu, lokhu akudingekile ngokusobala. Kudingeka widthi-elementi yengane kuphela.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
<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>

Okuhlosiwe okuningi

I-A <button>noma <a>ingabonisa futhi ifihle izinto eziningi ngokuzibhekisela ngesikhethi hrefnoma kusibaluli sayo data-bs-target. Amaningi <button>noma <a>angabonisa futhi afihle into uma ngamunye ebhekisela kuyo hrefnoma data-bs-targetngesibaluli sakhe

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>

Ukufinyeleleka

Qiniseka ukuthi ungeza aria-expandedkusici sokulawula. Lesi sibaluli siveza ngokusobala isimo samanje se-elementi egoqekayo eboshelwe ekulawuleni izifundi zesikrini kanye nobuchwepheshe obusizayo obufanayo. Uma i-elementi egoqekayo ivalwa ngokuzenzakalelayo, isibaluli sesici sokulawula kufanele sibe nenani elithi aria-expanded="false". Uma usethe i-elementi egoqekayo ukuthi ivuleke ngokuzenzakalelayo usebenzisa showiklasi, setha aria-expanded="true"kusilawuli esikhundleni salokho. I-plugin izoguqula ngokuzenzakalelayo lesi sibaluli kusilawuli ngokusekelwe ekutheni i-elementi egoqekayo ivuliwe noma ivaliwe yini (nge-JavaScript, noma ngenxa yokuthi umsebenzisi ucuphe enye into yokulawula nayo eboshelwe kwinto efanayo egoqekayo). Uma i-elementi ye-HTML yento yokulawula ingeyona inkinobho (isb., i <a>noma <div>), isibalulirole="button"kufanele kwengezwe ku-elementi.

Uma i-elementi yakho yokulawula iqondise kwinto eyodwa egoqekayo - okungukuthi data-bs-targetisibaluli sikhomba idkusikhethi - kufanele wengeze aria-controlsisici sokulawula, esiqukethe idinto egoqekayo. Izifundi zesikrini zesimanje nobuchwepheshe bokusiza obufanayo busebenzisa lesi sici ukuze kunikeze abasebenzisi izinqamuleli ezengeziwe ukuze bazulazule ngokuqondile ku-elementi egoqekayo ngokwayo.

Qaphela ukuthi ukusebenzisa kwamanje kwe-Bootstrap akubandakanyi ukusebenzisana okuhlukahlukene kwekhibhodi kokuzithandela okuchazwe ku- WAI-ARIA Imikhuba Yokugunyaza 1.1 iphethini ye-accordion - uzodinga ukuzifaka wena ngokwakho ne-JavaScript yangokwezifiso.

Sass

Okuguquguqukayo

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

Amakilasi

Goqa amakilasi enguquko angatholakala scss/_transitions.scssnjengoba lawa abelwe kuzo zonke izingxenye eziningi (ukugoqa kanye ne-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);
  }
}

Ukusetshenziswa

I-plugin yokugoqa isebenzisa amakilasi ambalwa ukuphatha ukuphakamisa okusindayo:

  • .collapseifihla okuqukethwe
  • .collapse.showikhombisa okuqukethwe
  • .collapsingyengezwa lapho inguquko iqala, futhi ikhishwe lapho iqeda

Lawa makilasi angatholakala ku _transitions.scss.

Ngezibaluli zedatha

Vele ungeze data-bs-toggle="collapse"futhi u-a entweni data-bs-targetukuze unikeze ngokuzenzakalelayo ukulawula kwe-elementi eyodwa noma eziningi ezigoqekayo. Isibaluli data-bs-targetsamukela isikhethi se-CSS ongafaka kuso ukugoqa. Qiniseka ukuthi ungeza ikilasi collapseku-elementi egoqekayo. Uma ungathanda ukuthi ivuleke ngokuzenzakalelayo, engeza iklasi elengeziwe show.

Ukuze ungeze ukuphathwa kweqembu okufana ne-accordion endaweni egoqekayo, engeza isibaluli sedatha data-bs-parent="#selector". Bheka ikhasi le- accordion ukuze uthole ulwazi olwengeziwe.

Nge-JavaScript

Nika amandla ngokwenza nge:

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

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-bs-, njengaku data-bs-parent="".

Igama Uhlobo Okuzenzakalelayo Incazelo
parent isikhethi | into ye-jQuery | Isici se-DOM false Uma umzali enikeziwe, khona-ke zonke izici ezigoqekayo ngaphansi komzali othile zizovalwa lapho le nto egoqekayo iboniswa. (okufana nokuziphatha kwe-accordion yendabuko - lokhu kuncike cardekilasini). Isibaluli kufanele simiswe endaweni egoqekayo eqondiwe.
toggle boolean true Iguqula into egoqekayo ekunxuseni

Izindlela

Izindlela ze-Asynchronous kanye noshintsho

Zonke izindlela ze-API azivumelanisi futhi ziqala inguquko . Babuyele kofonayo uma sekuqalwa uguquko kodwa lungakapheli . Ngokungeziwe, ikholi yendlela engxenyeni yoshintsho izozitshwa .

Bheka imibhalo yethu ye-JavaScript ukuze uthole ulwazi olwengeziwe .

Yenza okuqukethwe kwakho kusebenze njengento egoqekayo. Yamukela izinketho ozikhethela object.

Ungakha isenzakalo sokuwa nomakhi, isibonelo:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
Indlela Incazelo
toggle Iguqula into egoqekayo ukuze iboniswe noma ifihlwe. Ibuyela kofonayo ngaphambi kokuba into egoqekayo iboniswe noma ifihlwe (okungukuthi ngaphambi kokuba kwenzeke shown.bs.collapsenoma hidden.bs.collapseisigameko).
show Ibonisa into egoqekayo. Ibuyela kofonayo ngaphambi kokuba into egoqekayo iboniswe (isb, ngaphambi kokuthi shown.bs.collapsekwenzeke umcimbi).
hide Ifihla into egoqekayo. Ibuyela kofonayo ngaphambi kokuba into egoqekayo ifihleke (isb, ngaphambi kokuthi hidden.bs.collapsekwenzeke umcimbi).
dispose Icekela phansi ukuwa kwento. (Isusa idatha egciniwe kusici se-DOM)
getInstance Indlela emile ekuvumela ukuthi uthole isenzakalo sokuwa esihlotshaniswa nento ye-DOM, ungayisebenzisa kanje:bootstrap.Collapse.getInstance(element)
getOrCreateInstance Indlela emile ebuyisela isenzakalo sokugoqa esihlobene nento ye-DOM noma idale entsha uma kwenzeka ingaqaliswanga. Ungayisebenzisa kanje:bootstrap.Collapse.getOrCreateInstance(element)

Imicimbi

Ikilasi lokugoqa le-Bootstrap lidalula imicimbi embalwa ukuze ixhumeke ekusebenzeni kokugoqa.

Uhlobo lomcimbi Incazelo
show.bs.collapse Lo mcimbi uvutha ngokushesha lapho showindlela yesibonelo ibizwa.
shown.bs.collapse Lo mcimbi uxoshwa lapho isici sokugoqa senziwe sabonakala kumsebenzisi (sizolinda ukuthi izinguquko ze-CSS ziqedele).
hide.bs.collapse Lo mcimbi uxoshwa ngokushesha lapho hideindlela isibiziwe.
hidden.bs.collapse Lo mcimbi uxoshwa lapho isici sokugoqa sifihliwe kumsebenzisi (sizolinda ukuthi izinguquko ze-CSS ziqedele).
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})