Laktawan sa panguna nga sulud Laktaw sa docs navigation
in English

Nahugno

I-toggle ang visibility sa sulod sa imong proyekto gamit ang pipila ka klase ug among JavaScript plugins.

Giunsa kini paglihok

Ang collapse JavaScript plugin gigamit sa pagpakita ug pagtago sa sulod. Ang mga butones o mga angkla gigamit isip mga trigger nga gimapa sa piho nga mga elemento nga imong gi-toggle. Ang pag-collapse sa usa ka elemento magpa-animate sa heightgikan sa kasamtangang bili niini ngadto sa 0. Gihatag kung giunsa pagdumala sa CSS ang mga animation, dili nimo magamit paddingsa usa ka .collapseelemento. Hinuon, gamita ang klase isip usa ka independente nga elemento sa pagputos.

Ang epekto sa animation niini nga sangkap nagdepende sa prefers-reduced-motionpangutana sa media. Tan-awa ang gikunhod nga seksyon sa paglihok sa among dokumentasyon sa accessibility .

Pananglitan

I-klik ang mga buton sa ubos aron ipakita ug itago ang laing elemento pinaagi sa mga kausaban sa klase:

  • .collapsenagtago sa sulod
  • .collapsinggigamit sa panahon sa transisyon
  • .collapse.shownagpakita sa sulod

Kasagaran, girekomenda namon ang paggamit sa usa ka buton nga adunay data-bs-targethiyas. Bisan kung dili girekomenda gikan sa usa ka semantiko nga punto sa pagtan-aw, mahimo ka usab mogamit usa ka link nga adunay hrefhiyas (ug usa ka role="button"). Sa duha ka mga kaso, ang data-bs-toggle="collapse"gikinahanglan.

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-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-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>

Pahigda

Ang collapse plugin nagsuporta usab sa horizontal collapsing. Idugang ang .collapse-horizontalklase sa modifier aron i-transition ang widthimbes heightug ibutang ang usa widthsa diha-diha nga elemento sa bata. Mobati nga gawasnon sa pagsulat sa imong kaugalingon nga kostumbre nga Sass, gamita ang inline nga mga istilo, o gamita ang among gilapdon nga mga gamit .

Palihug timan-i nga samtang ang panig-ingnan sa ubos adunay usa ka min-heightset aron malikayan ang sobra nga pagpintal sa among mga dokumento, dili kini klaro nga gikinahanglan. Ang widthon the child element lang ang gikinahanglan.

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-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

Daghang mga target

Ang A <button>o <a>mahimong magpakita ug magtago sa daghang mga elemento pinaagi sa pag-refer kanila sa usa ka tigpili sa hrefo data-bs-targethiyas niini. Multiple <button>o <a>mahimong magpakita ug magtago sa usa ka elemento kung ang matag usa kanila maghisgot niini sa ilang hrefo data-bs-targetattribute

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-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-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>

Accessibility

Siguroha nga idugang aria-expandedsa kontrol nga elemento. Kini nga hiyas tin-aw nga nagpahayag sa kasamtangan nga kahimtang sa nahugno nga elemento nga nahigot sa kontrol sa mga magbabasa sa screen ug susama nga mga teknolohiya sa pagtabang. Kung ang ma-collapsible nga elemento sirado pinaagi sa default, ang attribute sa control element kinahanglan adunay kantidad nga aria-expanded="false". Kung imong gitakda nga ang collapsible nga elemento mahimong bukas pinaagi sa default gamit ang showklase, ibutang aria-expanded="true"sa kontrol. Awtomatiko nga i-toggle sa plugin ang kini nga attribute sa kontrol base sa kung giablihan o gisirado ang collapsible nga elemento (pinaagi sa JavaScript, o tungod kay ang user nag-trigger og laing control element nga nahigot usab sa samang collapsible nga elemento). Kung ang elemento sa kontrol nga HTML dili usa ka buton (pananglitan, usa <a>o <div>), ang hiyasrole="button"kinahanglan idugang sa elemento.

Kung ang imong kontrol nga elemento nagpunting sa usa ka nahugno nga elemento - ie ang data-bs-targetattribute nagpunting sa usa ka idselector - kinahanglan nimong idugang ang aria-controlsattribute sa control element, nga adunay sulod idsa collapsible nga elemento. Ang mga moderno nga screen reader ug susamang assistive nga mga teknolohiya naggamit niini nga attribute aron mahatagan ang mga user og dugang nga mga shortcut aron direkta nga maka-navigate sa collapsible nga elemento mismo.

Timan-i nga ang kasamtangang pagpatuman sa Bootstrap wala maglakip sa lain-laing opsyonal nga mga interaksyon sa keyboard nga gihulagway sa WAI-ARIA Authoring Practices 1.1 accordion pattern - kinahanglan nimo nga iapil kini sa imong kaugalingon sa custom JavaScript.

Sass

Mga variable

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

Mga klase

Ang mga collapse transition classes makit-an tungod scss/_transitions.scsskay kini gipaambit sa daghang mga sangkap (collapse ug accordion).

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

Paggamit

Ang collapse plugin naggamit sa pipila ka mga klase sa pagdumala sa bug-at nga pag-alsa:

  • .collapsenagtago sa sulod
  • .collapse.shownagpakita sa sulod
  • .collapsingidugang kung magsugod na ang transisyon, ug tangtangon kung mahuman na

Kini nga mga klase makita sa _transitions.scss.

Pinaagi sa data attributes

Idugang lang data-bs-toggle="collapse"ug a data-bs-targetsa elemento aron awtomatik nga ma-assign ang kontrol sa usa o daghan pa nga nahugno nga mga elemento. Ang data-bs-targetattribute modawat ug CSS selector aron magamit ang pagkahugno. Siguroha nga idugang ang klase collapsesa collapsible nga elemento. Kung gusto nimo nga kini nga default bukas, idugang ang dugang nga klase show.

Aron idugang ang sama sa akordyon nga pagdumala sa grupo ngadto sa usa ka ma-collapsible nga lugar, idugang ang data attribute data-bs-parent="#selector". Tan-awa ang panid sa akordyon alang sa dugang nga impormasyon.

Pinaagi sa JavaScript

I-enable ang mano-mano gamit ang:

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

Mga kapilian

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-bs-, sama sa data-bs-parent="".

Ngalan Matang Default Deskripsyon
parent tigpili | jQuery butang | DOM nga elemento false Kung gihatag ang ginikanan, nan ang tanan nga mga collapsible nga elemento sa ilawom sa gitakda nga ginikanan pagasirhan kung kini nga collapsible nga butang gipakita. (parehas sa tradisyonal nga pamatasan sa akordyon - kini nagdepende sa cardklase). Kinahanglang ibutang ang attribute sa target collapsible area.
toggle boolean true I-toggle ang ma-collapsible nga elemento sa pag-ampo

Pamaagi

Asynchronous nga mga pamaagi ug transisyon

Ang tanan nga mga pamaagi sa API kay asynchronous ug magsugod ug transisyon . Mibalik sila sa nanawag sa diha nga nagsugod ang transisyon apan sa wala pa kini matapos . Dugang pa, ang usa ka paagi sa pagtawag sa usa ka transisyon nga sangkap dili tagdon .

Tan-awa ang among JavaScript nga dokumentasyon para sa dugang nga impormasyon .

Gi-aktibo ang imong sulud ingon usa ka ma-collapsible nga elemento. Modawat ug opsyonal nga mga kapilian object.

Makahimo ka og usa ka pananglitan sa pagkahugno sa constructor, pananglitan:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
Pamaagi Deskripsyon
toggle I-toggle ang usa ka ma-collapsible nga elemento aron ipakita o gitago. Mibalik sa nagtawag sa wala pa ang nahugno nga elemento sa tinuud gipakita o gitago (ie sa wala pa mahitabo ang shown.bs.collapseo hidden.bs.collapsepanghitabo).
show Nagpakita sa usa ka ma-collapsible nga elemento. Mibalik sa nagtawag sa wala pa ang nahugno nga elemento sa tinuud gipakita (pananglitan, sa wala pa shown.bs.collapsemahitabo ang panghitabo).
hide Nagtago sa usa ka ma-collapsible nga elemento. Mibalik sa nagtawag sa wala pa ang nahugno nga elemento gitago (pananglitan, sa wala pa hidden.bs.collapsemahitabo ang panghitabo).
dispose Giguba ang pagkahugno sa usa ka elemento. (Gitangtang ang gitipigan nga datos sa elemento sa DOM)
getInstance Static nga pamaagi nga nagtugot kanimo nga makuha ang pagkahugno nga pananglitan nga nalangkit sa usa ka elemento sa DOM, mahimo nimo kining gamiton sama niini:bootstrap.Collapse.getInstance(element)
getOrCreateInstance Static nga pamaagi nga nagbalik sa usa ka pananglitan sa pagkahugno nga nalambigit sa usa ka elemento sa DOM o paghimo og usa ka bag-o kung wala kini gisugdan. Mahimo nimo kini gamiton sama niini:bootstrap.Collapse.getOrCreateInstance(element)

Mga panghitabo

Ang klase sa pagkahugno sa Bootstrap nagpadayag sa pipila ka mga panghitabo alang sa pag-hook sa pag-andar sa pagkahugno.

Uri sa panghitabo Deskripsyon
show.bs.collapse Kini nga panghitabo nagdilaab dayon kung ang showpamaagi sa pananglitan gitawag.
shown.bs.collapse Kini nga panghitabo gipabuto kung ang usa ka elemento sa pagkahugno nahimo nga makita sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS).
hide.bs.collapse Kini nga panghitabo gipabuto dayon kung ang hidepamaagi gitawag na.
hidden.bs.collapse Kini nga panghitabo gipabuto kung ang usa ka elemento sa pagkahugno gitago gikan sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS).
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})