Source

Goqa

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 kuzophila heightisuka enanini layo lamanje iye ku- 0. Uma kunikezwe ukuthi i-CSS iphatha kanjani ukugqwayiza, awukwazi ukusebenzisa paddingkusici .collapse. Kunalokho, sebenzisa ikilasi njengento yokugoqa ezimele.

Isibonelo

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

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

Ungasebenzisa isixhumanisi hrefesinesibaluli, noma inkinobho data-targetenesibaluli. Kuzo zombili izimo, data-toggle="collapse"kuyadingeka.

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

Okuhlosiwe okuningi

I-A <button>noma <a>ingabonisa futhi ifihle izici eziningi ngokuzibhekisela ngesikhethi se-JQuery kuso hrefnoma data-targetkusibaluli. Amaningi <button>noma <a>angabonisa futhi afihle into uma ngamunye ebhekisela kuyo hrefnoma data-targetngesibaluli sakhe

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

Isibonelo se-accordion

Usebenzisa ingxenye yekhadi , unganweba ukuziphatha kokugoqa okuzenzakalelayo ukuze udale i-accordion.

Anim pariatur cliche reprehenderit, enim eiusmod high life accamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Iloli lokudla i-quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua beka inyoni kuso i-squid single-origin coffee nulla imaginenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. I-Ad vegan Exeur butcher vice lomo. I-Leggings occaecat yenza ubhiya wepulazi ukuya etafuleni, i-denim eluhlaza yobuhle be-synth nesciunt cishe awukaze uzwe ngabo i-accusamus labore i-VHS eqhubekayo.
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.
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 class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 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>
      </h5>
    </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">
      <h5 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>
      </h5>
    </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">
      <h5 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>
      </h5>
    </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>

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 ye-collapsbile). 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-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 okuchazwe kuphethini ye-accordion ye-WAI-ARIA 1.1 - uzodinga ukuzifaka wena ngokwakho ne-JavaScript yangokwezifiso.

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-toggle="collapse"futhi u-a entweni data-targetukuze unikeze ngokuzenzakalelayo ukulawula kwe-elementi eyodwa noma eziningi ezigoqekayo. Isibaluli data-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-parent="#selector". Bheka idemo ukuze ubone lokhu kusebenza.

Nge-JavaScript

Nika amandla ngokwenza nge:

$('.collapse').collapse()

Izinketho

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

Igama Uhlobo Okuzenzakalelayo Incazelo
umzali isikhethi | into ye-jQuery | Isici se-DOM amanga 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.
guqula boolean iqiniso 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 .

Bona imibhalo yethu ye-JavaScript ukuze uthole ulwazi olwengeziwe.

.collapse(options)

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

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('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).

.collapse('show')

Ibonisa into egoqekayo. Ibuyela kofonayo ngaphambi kokuba into egoqekayo iboniswe (okungukuthi ngaphambi kokuba shown.bs.collapsekwenzeke umcimbi).

.collapse('hide')

Ifihla into egoqekayo. Ibuyela kofonayo ngaphambi kokuba into egoqekayo ifihleke (okungukuthi ngaphambi kokuthi hidden.bs.collapsekwenzeke umcimbi).

.collapse('dispose')

Icekela phansi ukuwa kwento.

Imicimbi

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

Uhlobo Lomcimbi Incazelo
show.bs.goqa Lo mcimbi uvutha ngokushesha lapho showindlela yesibonelo ibizwa.
ikhonjisiwe.bs.goqa Lo mcimbi uxoshwa lapho isici sokugoqa senziwe sabonakala kumsebenzisi (sizolinda ukuthi izinguquko ze-CSS ziqedele).
fihla.bs.goqa Lo mcimbi uxoshwa ngokushesha lapho hideindlela isibiziwe.
kufihlwe.bs.goqa Lo mcimbi uxoshwa lapho isici sokugoqa sifihliwe kumsebenzisi (sizolinda ukuthi izinguquko ze-CSS ziqedele). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})