Source

Marpuog

I-toggle ti pannakakita ti linaon iti ballasiw ti proyektom babaen ti sumagmamano a klase ken dagiti pluginmi ti JavaScript.

Pagwadan

I-klik dagiti buton iti baba tapno maipakita ken ilemmeng ti sabali nga elemento babaen dagiti panagbalbaliw ti klase:

  • .collapseilemmeng ti linaonna
  • .collapsingket mayaplikar bayat dagiti panagbalbaliw
  • .collapse.showipakitana ti linaonna

Mabalinmo nga usaren ti silpo nga addaan iti hrefattribute, wenno ti buton nga addaan iti data-targetattribute. Iti agpada a kaso, ti data-toggle="collapse"ket kasapulan.

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>

Adu a puntiria

A <button>wenno <a>mabalinna nga ipakita ken ilemmeng dagiti adu nga elemento babaen ti panangireperensiana kadagitoy babaen ti JQuery selector iti hrefwenno data-targetattribute-na. Multiple <button>wenno <a>mabalin nga ipakita ken ilemmeng ti maysa nga elemento no tunggal maysa ket reperensiada daytoy babaen ti hrefor data-targetattribute -da

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>

Pagarigan ti akordeon

Babaen ti panangusar iti paset ti kard , mabalinmo a palawaen ti default a kababalin ti panagreggaay tapno makaaramidka iti akordeon.

Anim pariatur cliche reprehenderit, enim eiusmod nangato a biag accusamus terry richardson ad pusit. 3 lobo bulan officia aute, saan nga cupidatat nga skateboard dolor brunch. Trak ti taraon quinoa nesciunt laborum eiusmod. Brunch 3 lobo bulan tempor, sunt aliqua ikabil ti tumatayab iti dayta pusit maymaysa ti nagtaudanna a kape nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft serbesa a panagtrabaho wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur nga kartero bise lomo. Leggings occaecat craft beer talon-agingga-iti-lamisaan, hilaw a denim aesthetic synth nesciunt nalabit saanmo a nangngeg kadakuada 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.
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 id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" 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="#accordion">
      <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" 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="#accordion">
      <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" 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="#accordion">
      <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>

Ti pannakagun-od

Siguraduen nga inayon aria-expandedti elemento ti panangkontrol. Daytoy a kababalin ket nalawag a mangipakaammo ti agdama a kasasaad ti maibukbok nga elemento a naisilpo iti kontrol kadagiti agbasbasa ti iskrin ken dagiti kapada a makatulong a teknolohia. No ti maibukbok nga elemento ket naserraan babaen ti kasisigud, ti attribute iti elemento ti panagtengngel ket rumbeng nga addaan iti pateg ti aria-expanded="false". No inkeddengmo ti maibukbok nga elemento a malukatan babaen ti default babaen ti panagusar ti showklase, ikeddengmo aria-expanded="true"ketdi ti kontrol. Ti plugin ket automatiko a mangbalbaliw iti daytoy a kababalin iti kontrol a naibatay no ti maibukbok nga elemento ket naluktan wenno naserraan wenno saan (babaen ti JavaScript, wenno gapu ta ti agar-aramat ket nangtignay ti sabali nga elemento ti panagtengngel a naisilpo met iti isu met laeng nga elemento ti collapsbile). No ti elemento ti HTML ti elemento ti panangtengngel ket saan a buton (kas pagarigan, maysa <a>wenno <div>), ti attributerole="button"rumbeng a mainayon iti elemento.

No ti elemento ti panagtengngelmo ket mangpuntiria ti maymaysa a maibukbok nga elemento – kayatna a sawen ti data-targetattribute ket mangiturturong iti maysa a idmangpili – rumbeng nga inayonmo ti aria-controlsattribute iti elemento ti kontrol, a naglaon ti idti maibukbok nga elemento. Dagiti moderno a managbasa ti iskrin ken dagiti kapada a makatulong a teknolohia ket agus-usar iti daytoy a kababalin tapno mangipaay kadagiti agar-aramat kadagiti kanayonan a ab-ababa a dalan tapno direkta nga ag-navigate iti maibukbok nga elemento a mismo.

Imutektekanyo a ti agdama a pannakaipatungpal ti Bootstrap ket saan a mangsaklaw kadagiti nadumaduma a panagtitinnulong ti teklado a nailadawan iti WAI-ARIA Authoring Practices 1.1 a padron ti akordeon - kasapulam nga iraman dagitoy a mismo babaen ti kostumbre a JavaScript.

Panagusar

Ti plugin ti pannakarba ket agus-usar kadagiti sumagmamano a klase tapno mangasikaso ti nadagsen a panagipangato:

  • .collapseilemmengna ti linaonna
  • .collapse.showipakitana ti linaonna
  • .collapsingmainayon no mangrugi ti panagbalbaliw, ken maikkat no malpas

Dagitoy a klase ket mabalin a masarakan iti _transitions.scss.

Babaen kadagiti attribute ti datos

Basta inayon data-toggle="collapse"ken a data-targetiti elemento tapno automatiko a mangituding ti kontrol ti maysa wenno ad-adu pay a mai-collapsible nga elemento. Ti data-targetattribute ket umawat ti maysa a CSS a mangpili a pangipakat ti collapse iti. Siguraduen nga inayon ti klase collapseiti collapsible nga elemento. No kayatmo a default a malukatan, inayon ti kanayonan a klase show.

Tapno manginayon ti kasla akordeon a panagituray ti grupo iti maysa a maibukbok a lugar, inayon ti kabileg ti datos data-parent="#selector". Kitaen ti demo tapno makita daytoy nga agtigtignay.

Babaen ti JavaScript

Pagbalinen a manual babaen ti:

$('.collapse').collapse()

Dagiti Pagpilian

Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-, a kas iti data-parent="".

Nagan Tipo Default Panangiladawan
nagannak agpili ti | jQuery nga banag | DOM nga elemento saan nga agpayso No ti nagannak ket naited, kalpasanna amin dagiti maibukbok nga elemento iti baba ti naikeddeng a nagannak ket maiserra no daytoy a maibukbok a banag ket maipakita. (kapada ti tradisional a kababalin ti akordeon - daytoy ket agpannuray iti cardklase). Ti attribute ket masapul a maikeddeng iti target a collapsible a lugar.
ag-toggle nga boolean nga agpayso I-toggles ti collapsible nga elemento iti inbokasion

Dagiti Pamay-an

Dagiti asynchronous a pamay-an ken panagbalbaliw

Amin a pamay-an ti API ket asynchronous ken mangrugi ti panagbalbaliw . Agsublida iti tumawag apaman a mairugi ti panagbalbaliw ngem sakbay nga agpatingga . Iti pay maipatinayon, ti maysa nga awag ti pamay-an iti maysa a panagbalbaliw a paset ket mailaksidto .

Kitaen ti dokumentasionmi iti JavaScript para iti ad-adu pay nga impormasion.

.collapse(options)

Paaktiboenna ti linaonmo kas maysa a collapsible nga elemento. Awaten ti maysa nga opsional a pagpilian object.

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

.collapse('toggle')

I-toggles ti collapsible nga elemento iti maipakita wenno mailemmeng. Agsubli iti tumawag sakbay a ti maibukbok nga elemento ket aktual a naipakita wenno nailemmeng (kayatna a sawen sakbay a mapasamak ti shown.bs.collapsewenno hidden.bs.collapsepasamak).

.collapse('show')

Ipakita ti maysa a collapsible nga elemento. Agsubli iti umaw-awag sakbay a ti maibukbok nga elemento ket aktual a naipakita (kayatna a sawen sakbay a shown.bs.collapsemapasamak ti pasamak).

.collapse('hide')

Ilemmengna ti maysa a collapsible nga elemento. Agsubli iti tumawag sakbay a ti maibukbok nga elemento ket aktual a nailemmeng (kayatna a sawen sakbay a hidden.bs.collapsemapasamak ti pasamak).

.collapse('dispose')

Dadaelenna ti pannakarba ti maysa nga elemento.

Dagiti Pasamak

Ti klase ti panagreggaay ti Bootstrap ket mangibutaktak kadagiti sumagmamano a pasamak para iti panag-hook iti panagusar ti panagreggaay.

Kita ti Pasamak Panangiladawan
ipakita.bs.ag-collapse Daytoy a pasamak ket agputok a dagus no ti showpamay-an ti pagarigan ket maawagan.
naipakita.bs.collapse Daytoy a pasamak ket mapaputok no ti maysa nga elemento ti panagreggaay ket naaramid a makita ti agar-aramat (urayenna dagiti panagbalbaliw ti CSS a malpas).
ilemmeng.bs.ag-collapse Daytoy a pasamak ket dagus a mapaputok no ti hidepamay-an ket naawagan.
nailemmeng.bs.ag-collapse Daytoy a pasamak ket mapaputok no ti maysa nga elemento ti panagreggaay ket nailemmeng manipud iti agar-aramat (urayenna dagiti panagbalbaliw ti CSS a malpas). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})