Rekọja si akoonu akọkọ Rekọja si lilọ kiri awọn docs

Yi hihan akoonu kọja iṣẹ akanṣe rẹ pẹlu awọn kilasi diẹ ati awọn afikun JavaScript wa.

Bawo ni o ṣe n ṣiṣẹ

Ohun itanna JavaScript ti ṣubu ni a lo lati ṣafihan ati tọju akoonu. Awọn bọtini tabi awọn ìdákọró ni a lo bi awọn okunfa ti o ya aworan si awọn eroja kan pato ti o yipada. Pipalẹ ohun elo kan yoo ṣe igbesi aye heightlati iye lọwọlọwọ si 0. Fun bi CSS ṣe n kapa awọn ohun idanilaraya, o ko le lo paddinglori .collapseeroja kan. Dipo, lo kilaasi bi ohun elo murasilẹ ominira.

Ipa iwara ti paati yii dale lori prefers-reduced-motionibeere media. Wo apakan išipopada ti o dinku ti iwe iraye si wa .

Apeere

Tẹ awọn bọtini ni isalẹ lati ṣafihan ati tọju nkan miiran nipasẹ awọn ayipada kilasi:

  • .collapsehides akoonu
  • .collapsingti lo lakoko awọn iyipada
  • .collapse.showfihan akoonu

Ni gbogbogbo, a ṣeduro lilo bọtini kan pẹlu data-bs-targetabuda naa. Lakoko ti a ko ṣe iṣeduro lati oju wiwo atunmọ, o tun le lo ọna asopọ kan pẹlu hrefabuda (ati a role="button"). Ni awọn ọran mejeeji, o data-bs-toggle="collapse"nilo.

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>

Petele

Ohun itanna idapọ naa tun ṣe atilẹyin idaruku petele. Fi awọn .collapse-horizontalmodifier kilasi lati orilede widthdipo heightki o si ṣeto a widthlori lẹsẹkẹsẹ omo ano. Lero ọfẹ lati kọ aṣa Sass tirẹ, lo awọn aza inline, tabi lo awọn ohun elo iwọn wa .

Jọwọ ṣe akiyesi pe lakoko ti apẹẹrẹ ti o wa ni isalẹ ni eto min-heightlati yago fun awọn atunṣe pupọ ninu awọn iwe aṣẹ wa, eyi ko nilo ni gbangba. Nikan widthlori ọmọ ano wa ni ti beere.

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>

Awọn ibi-afẹde pupọ

A <button>tabi <a>le ṣe afihan ati tọju awọn eroja lọpọlọpọ nipa sisọ wọn pẹlu yiyan ninu rẹ hreftabi abuda data-bs-target. Pupọ <button>tabi <a>le ṣafihan ati tọju ohun elo kan ti ọkọọkan wọn ba tọka si pẹlu wọn hreftabi data-bs-targetikasi

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>

Wiwọle

Rii daju lati ṣafikun aria-expandedsi ipin iṣakoso. Ẹya-ara yii ṣe afihan ni gbangba ipo lọwọlọwọ ti nkan ti o le bajẹ ti a so mọ iṣakoso si awọn oluka iboju ati awọn imọ-ẹrọ iranlọwọ ti o jọra. Ti ohun elo ti o le kojọpọ ba ti wa ni pipade nipasẹ aiyipada, ẹda ti o wa lori ipin iṣakoso yẹ ki o ni iye kan ti aria-expanded="false". Ti o ba ti ṣeto eroja ikojọpọ lati ṣii nipasẹ aiyipada nipa lilo showkilasi, ṣeto aria-expanded="true"lori iṣakoso dipo. Ohun itanna naa yoo yi abuda yii pada laifọwọyi lori iṣakoso ti o da lori boya tabi kii ṣe nkan ti o le ṣubu tabi ko ti ṣii tabi tiipa (nipasẹ JavaScript, tabi nitori oluṣamulo ti nfa ohun elo iṣakoso miiran tun ti so mọ ipin kanna ti o le kọlu). Ti ohun elo HTML ti iṣakoso kii ṣe bọtini kan (fun apẹẹrẹ, o yẹ ki o ṣafikun ẹya kan.<a> tabi <div>), abuda naarole="button"

Ti ohun elo iṣakoso rẹ ba n fojusi ohun elo ikojọpọ kan ṣoṣo - ie data-bs-targetabuda naa n tọka si idoluyan - o yẹ ki o ṣafikun aria-controlsabuda naa si ipin iṣakoso, ti o ni nkan idti o le kojọpọ. Awọn oluka iboju ode oni ati awọn imọ-ẹrọ iranlọwọ ti o jọra ṣe lilo abuda yii lati pese awọn olumulo pẹlu awọn ọna abuja ni afikun lati lilö kiri taara si nkan ti o le kọlu funrararẹ.

Ṣe akiyesi pe imuse lọwọlọwọ Bootstrap ko bo ọpọlọpọ awọn ibaraenisepo keyboard iyan ti a sapejuwe ninu ilana Aṣẹ alakọwe WAI-ARIA 1.1 - iwọ yoo nilo lati ṣafikun iwọnyi funrararẹ pẹlu JavaScript aṣa.

Sass

Awọn oniyipada

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

Awọn kilasi

Awọn kilasi iyipada ti o ṣubu ni a le rii ni scss/_transitions.scssbi a ṣe pin iwọnyi kọja awọn paati lọpọlọpọ (ruṣubu ati 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);
  }
}

Lilo

Ohun itanna idapọmọra nlo awọn kilasi diẹ lati mu gbigbe gbigbe ti o wuwo naa:

  • .collapsehides awọn akoonu
  • .collapse.showfihan akoonu
  • .collapsingti wa ni afikun nigbati awọn orilede bẹrẹ, ati kuro nigbati o ba pari

Awọn kilasi wọnyi le wa ni _transitions.scss.

Nipasẹ awọn abuda data

Kan ṣafikun data-bs-toggle="collapse"ati a data-bs-targetsi eroja lati fi iṣakoso laifọwọyi ti ọkan tabi diẹ ẹ sii awọn eroja ikojọpọ. Ẹya naa data-bs-targetgba oluyan CSS kan lati lo iṣubu si. Rii daju lati ṣafikun kilasi collapsenaa si nkan ti o le ṣubu. Ti o ba fẹ ki o ṣii aiyipada, ṣafikun afikun kilasi show.

Lati ṣafikun iṣakoso ẹgbẹ ti o dabi accordion si agbegbe ikojọpọ, ṣafikun ẹda data naa data-bs-parent="#selector". Tọkasi oju-iwe accordion fun alaye diẹ sii.

Nipasẹ JavaScript

Mu ṣiṣẹ pẹlu ọwọ pẹlu:

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

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-bs-, bi ninu data-bs-parent="".

Oruko Iru Aiyipada Apejuwe
parent yiyan | ohun jQuery | DOM eroja false Ti o ba ti pese obi, lẹhinna gbogbo awọn eroja ti o le kojọpọ labẹ obi ti o wa ni pato yoo wa ni pipade nigbati ohun kan ti o le kọlu ba han. (iru si ibile accordion ihuwasi - yi ni ti o gbẹkẹle lori awọn cardkilasi). Ẹya naa ni lati ṣeto si agbegbe ibi-afẹde collapsible.
toggle boolian true Yipada eroja ti o le kolu lori ẹbẹ

Awọn ọna

Awọn ọna Asynchronous ati awọn iyipada

Gbogbo awọn ọna API jẹ asynchronous ati bẹrẹ iyipada kan . Wọn pada si ọdọ olupe ni kete ti iyipada ti bẹrẹ ṣugbọn ṣaaju ki o to pari . Ni afikun, ipe ọna kan lori paati iyipada yoo jẹ kọbikita .

Wo iwe JavaScript wa fun alaye diẹ sii .

Mu akoonu rẹ ṣiṣẹ bi eroja ti o le kolu. Gba awọn aṣayan iyan object.

O le ṣẹda apẹẹrẹ ikọlu pẹlu onitumọ, fun apẹẹrẹ:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
Ọna Apejuwe
toggle Yi eroja ti o le kolu pada si ifihan tabi pamọ. Pada si olupe ṣaaju ki nkan ti o le kọlu ti han tabi farapamọ gangan (ie ṣaaju ki iṣẹlẹ shown.bs.collapsetabi hidden.bs.collapseiṣẹlẹ to waye).
show Ṣe afihan eroja ti o le ṣubu. Pada si olupe ṣaaju ki ohun elo ti o le kọlu ti han gangan (fun apẹẹrẹ, ṣaaju shown.bs.collapseiṣẹlẹ naa to waye).
hide Ìbòmọlẹ ohun kan collapsible. Pada si olupe ṣaaju ki nkan ti o le kolu ti farapamọ nitootọ (fun apẹẹrẹ, ṣaaju hidden.bs.collapseiṣẹlẹ naa to waye).
dispose O run ohun ano ká Collapse. (Yọ data ti o fipamọ sori nkan DOM kuro)
getInstance Ọna aimi eyiti o fun ọ laaye lati gba apẹẹrẹ isubu ti o ni nkan ṣe pẹlu nkan DOM, o le lo bii eyi:bootstrap.Collapse.getInstance(element)
getOrCreateInstance Ọna aimi eyiti o da apẹẹrẹ ikọlu pada ti o ni nkan ṣe pẹlu nkan DOM kan tabi ṣẹda ọkan tuntun ti ko ba ṣe ipilẹṣẹ. O le lo bi eleyi:bootstrap.Collapse.getOrCreateInstance(element)

Awọn iṣẹlẹ

Kilasi Collapse Bootstrap ṣafihan awọn iṣẹlẹ diẹ fun sisọ sinu iṣẹ ṣiṣe iṣubu.

Iru iṣẹlẹ Apejuwe
show.bs.collapse Yi iṣẹlẹ ina lẹsẹkẹsẹ nigbati awọn showapẹẹrẹ ọna ti a npe ni.
shown.bs.collapse Iṣẹlẹ yii jẹ ina nigba ti a ti jẹ ki apilẹṣẹ iṣubu kan han si olumulo (yoo duro fun awọn iyipada CSS lati pari).
hide.bs.collapse Yi iṣẹlẹ ti wa ni kuro lenu ise lẹsẹkẹsẹ nigbati awọn hideọna ti a ti a npe ni.
hidden.bs.collapse Iṣẹlẹ yii jẹ ina nigba ti ohun elo iṣubu kan ti farapamọ lati ọdọ olumulo (yoo duro fun awọn iyipada CSS lati pari).
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})