in English

Marpuog

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

No kasano ti panagandar dayta

Ti collapse a plugin ti JavaScript ket maus-usar a mangipakita ken mangilemmeng ti linaon. Dagiti buton wenno angkla ket mausar a kas dagiti trigger a namapa kadagiti espesipiko nga elemento nga i-toggle-mo. Ti panangi-collap ti maysa nga elemento ket mangpabiag ti heightmanipud iti agdama a pategna aginggana iti 0. No maited no kasano a ti CSS ket mangasikaso kadagiti animasion, saanmo a mabalin nga usaren paddingiti maysa .collapsenga elemento. Imbes ketdi, usaren ti klase a kas maysa nga agwaywayas nga elemento ti panagbalkot.

Ti epekto ti animasion daytoy a paset ket agpannuray iti prefers-reduced-motionpanagsaludsod ti media. Kitaen ti benneg ti naikkat a panaggunay ti dokumentasionmi ti pannakagun-od .

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

Kaaduanna, irekomendarmi ti panagusar ti buton nga addaan iti data-targetattribute. Bayat a saan a mairekomendar manipud iti semantiko a punto de bista, mabalinmo pay nga usaren ti silpo nga addaan iti hrefattribute (ken a role="button"). Iti agpada a kaso, ti data-toggle="collapse"ket kasapulan.

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

Paidda

Ti plugin ti collapse ket mangsuporta pay ti horizontal collapsing. Inayon ti .widthklase ti mangbalbaliw tapno agbaliw ti widthimbes a heightken mangikeddeng ti a widthiti dagus nga elemento ti ubing. Mariknam a nawaya nga agsurat iti bukodmo a kostumbre a Sass, agusar kadagiti estilo ti inline, wenno agusar kadagiti utilidadmi iti kalawa .

Pangngaasi a laglagipen a bayat a ti pagarigan iti baba ket addaan iti min-heightset tapno maliklikan ti nalabes a panagpinta manen kadagiti dok-tayo, daytoy ket saan a nalawag a kasapulan. Ti laeng widthon the child element ti kasapulan.

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

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

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

Pagarigan ti akordeon

Babaen ti panangusar iti paset ti kard , mabalinmo a palawaen ti default a kababalin ti panagreggaay tapno makaaramidka iti akordeon. Tapno umiso a maragpat ti estilo ti akordeon, siguraduenyo nga usaren .accordionkas balkot.

Sumagmamano a linaon ti placeholder para iti umuna a panel ti akordeon. Daytoy a panel ket naipakita babaen ti default, gapu ti .showklase.

Some placeholder content for the second accordion panel. This panel is hidden by default.

And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
<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>

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 mangibalbaliw 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 a maibukbok nga elemento). 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 padron ti akordeon ti Giya ti Panagsurat ti Panagsurat ti ARIA - 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...
})