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

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-targetenesibaluli. Nakuba kunganconywa endaweni yokubuka ye-semantic, ungasebenzisa futhi isixhumanisi hrefesinesibaluli (kanye ne- role="button"). Kuzo zombili izimo, data-toggle="collapse"kuyadingeka.

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

Evundlile

I-plugin yokugoqa iphinde isekele ukugoqa okuvundlile. Engeza .widthikilasi 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 .

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

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

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

Isibonelo se-accordion

Usebenzisa ingxenye yekhadi , unganweba ukuziphatha kokugoqa okuzenzakalelayo ukuze udale i-accordion. Ukuze ufeze kahle isitayela se-accordion, qiniseka ukuthi usebenzisa .accordionnjenge-wrapper.

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

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-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 Yomhlahlandlela Wemikhuba Yokugunyaza ye-ARIA - 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="".

Izindlela

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

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