Pagbagsak

I-toggle ang visibility ng content sa iyong proyekto gamit ang ilang klase at ang aming mga JavaScript plugin.

Paano ito gumagana

Ang collapse JavaScript plugin ay ginagamit upang ipakita at itago ang nilalaman. Ginagamit ang mga button o anchor bilang mga trigger na nakamapa sa mga partikular na elemento na iyong i-toggle. Ang pag-collapse ng isang elemento ay magpapasigla sa heightmula sa kasalukuyang halaga nito hanggang sa 0. Dahil sa kung paano pinangangasiwaan ng CSS ang mga animation, hindi mo magagamit paddingsa isang .collapseelemento. Sa halip, gamitin ang klase bilang isang independiyenteng elemento ng pambalot.

Ang epekto ng animation ng bahaging ito ay nakasalalay sa prefers-reduced-motionquery ng media. Tingnan ang seksyon ng pinababang paggalaw ng aming dokumentasyon ng accessibility .

Halimbawa

I-click ang mga button sa ibaba upang ipakita at itago ang isa pang elemento sa pamamagitan ng mga pagbabago sa klase:

.collapsenagtatago ng nilalaman
.collapsingay inilapat sa panahon ng mga transition
.collapse.shownagpapakita ng nilalaman

Maaari kang gumamit ng isang link na may hrefkatangian, o isang pindutan na may data-targetkatangian. Sa parehong mga kaso, ang data-toggle="collapse"ay kinakailangan.

Mag-link sa href

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>

Maramihang mga target

Ang <button>o <a>ay maaaring magpakita at magtago ng maraming elemento sa pamamagitan ng pagtukoy sa kanila ng isang JQuery selector sa hrefo data-targetattribute nito. Marami <button>o <a>maaaring magpakita at magtago ng isang elemento kung ire-reference nila ito sa kanilang hrefo data-targetattribute

I-toggle ang unang elemento

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>

Halimbawa ng akurdyon

Gamit ang bahagi ng card , maaari mong i-extend ang default na pag-collapse na gawi upang lumikha ng isang accordion. Upang maayos na makamit ang estilo ng akurdyon, siguraduhing gamitin .accordionbilang isang pambalot.

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 maglagay ng ibon dito pusit single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan maliban sa butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt malamang na hindi mo pa narinig ang mga ito 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">
      <h2 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>
      </h2>
    </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">
      <h2 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>
      </h2>
    </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">
      <h2 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>
      </h2>
    </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>

Accessibility

Tiyaking idagdag aria-expandedsa control element. Ang katangiang ito ay tahasang naghahatid ng kasalukuyang estado ng nati-collaps na elemento na nakatali sa kontrol sa mga screen reader at mga katulad na pantulong na teknolohiya. Kung ang collapsible element ay sarado bilang default, ang attribute sa control element ay dapat may value na aria-expanded="false". Kung itinakda mo ang nako-collaps na elemento na bukas bilang default gamit ang showklase, itakda aria-expanded="true"na lang sa control. Awtomatikong i-toggle ng plugin ang attribute na ito sa control batay sa kung nabuksan o isinara o hindi ang collapsible na elemento (sa pamamagitan ng JavaScript, o dahil nag-trigger ang user ng isa pang control element na nakatali din sa parehong collapsbile na elemento). Kung ang elementong HTML ng control element ay hindi isang button (hal., an <a>or <div>), ang attributerole="button"dapat idagdag sa elemento.

Kung ang iyong control element ay nagta-target sa isang solong collapsible na elemento – ibig sabihin, ang data-targetattribute ay tumuturo sa isang idselector – dapat mong idagdag ang aria-controlsattribute sa control element, na naglalaman ng idng collapsible na elemento. Ginagamit ng mga makabagong screen reader at katulad na mga teknolohiyang pantulong ang katangiang ito upang bigyan ang mga user ng karagdagang mga shortcut upang direktang mag-navigate sa mismong nako-collaps na elemento.

Tandaan na ang kasalukuyang pagpapatupad ng Bootstrap ay hindi sumasaklaw sa iba't ibang mga pakikipag-ugnayan sa keyboard na inilarawan sa WAI-ARIA Authoring Practices 1.1 accordion pattern - kakailanganin mong isama ang mga ito sa iyong sarili sa custom na JavaScript.

Paggamit

Gumagamit ang collapse plugin ng ilang klase upang mahawakan ang mabigat na pag-aangat:

.collapsenagtatago ng nilalaman
.collapse.shownagpapakita ng nilalaman
.collapsingay idinagdag kapag nagsimula ang paglipat, at inalis kapag natapos na ito

Ang mga klase na ito ay matatagpuan sa _transitions.scss.

Sa pamamagitan ng mga katangian ng data

Idagdag lang data-toggle="collapse"at a data-targetsa elemento para awtomatikong magtalaga ng kontrol sa isa o higit pang mga collapsible na elemento. Tumatanggap ang data-targetattribute ng isang CSS selector para ilapat ang pag-collapse. Tiyaking idagdag ang klase collapsesa collapsible na elemento. Kung gusto mo itong maging default na bukas, idagdag ang karagdagang klase show.

Upang magdagdag ng mala-accordion na pamamahala ng pangkat sa isang collapsible na lugar, idagdag ang attribute ng data data-parent="#selector". Sumangguni sa demo upang makita ito sa pagkilos.

Sa pamamagitan ng JavaScript

Paganahin nang manu-mano gamit ang:

$('.collapse').collapse()

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-parent="".

Pangalan	Uri	Default	Paglalarawan
magulang	tagapili \| jQuery object \| DOM na elemento	mali	Kung ang magulang ay ibinigay, ang lahat ng mga collapsible na elemento sa ilalim ng tinukoy na magulang ay isasara kapag ang collapsible na item na ito ay ipinakita. (katulad ng tradisyonal na pag-uugali ng akurdyon - ito ay nakasalalay sa `card`klase). Ang attribute ay kailangang itakda sa target na collapsible na lugar.
magpalipat-lipat	boolean	totoo	I-toggle ang collapsible na elemento sa invocation

Paraan

Mga asynchronous na pamamaraan at paglipat

Ang lahat ng mga pamamaraan ng API ay asynchronous at nagsisimula ng isang paglipat . Bumalik sila sa tumatawag sa sandaling magsimula ang paglipat ngunit bago ito matapos . Bilang karagdagan, babalewalain ang isang method call sa isang transitioning component .

Tingnan ang aming dokumentasyon ng JavaScript para sa higit pang impormasyon .

`.collapse(options)`

Ina-activate ang iyong content bilang isang collapsible na elemento. Tumatanggap ng opsyonal na opsyon object.

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

`.collapse('toggle')`

Itina-toggle ang isang nako-collaps na elemento sa ipinapakita o nakatago. Bumabalik sa tumatawag bago naipakita o naitago ang nati-collaps na elemento (ibig sabihin, bago mangyari ang shown.bs.collapseo hidden.bs.collapsekaganapan).

`.collapse('show')`

Nagpapakita ng nati-collapse na elemento. Bumabalik sa tumatawag bago aktwal na naipakita ang collapsible na elemento (ibig sabihin, bago shown.bs.collapsemangyari ang kaganapan).

`.collapse('hide')`

Itinatago ang isang collapsible na elemento. Bumabalik sa tumatawag bago pa talaga naitago ang collapsible na elemento (ibig sabihin, bago hidden.bs.collapsemangyari ang kaganapan).

`.collapse('dispose')`

Sinisira ang pagbagsak ng isang elemento.

Mga kaganapan

Ang collapse class ng Bootstrap ay naglalantad ng ilang mga kaganapan para sa hooking sa collapse functionality.

Uri ng kaganapan	Paglalarawan
show.bs.collapse	Agad na gagana ang kaganapang ito kapag `show`tinawag ang paraan ng instance.
ipinapakita.bs.collapse	Ang kaganapang ito ay pinapagana kapag ang isang elemento ng pag-collapse ay ginawang nakikita ng user (maghihintay na makumpleto ang mga transition ng CSS).
hide.bs.collapse	Ang kaganapang ito ay agad na pinapagana kapag ang `hide`pamamaraan ay tinawag na.
hidden.bs.collapse	Ang kaganapang ito ay pinapagana kapag ang isang elemento ng pag-collapse ay naitago mula sa user (maghihintay na makumpleto ang mga transition ng CSS).

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