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-targetabuda naa. Lakoko ti a ko ṣ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-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-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>

Petele

Ohun itanna idapọ naa tun ṣe atilẹyin idakole petele. Fi awọn .widthmodifier 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-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>

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 JQuery ninu rẹ hreftabi abuda data-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-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-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>

Accordion apẹẹrẹ

Lilo awọn paati kaadi , o le fa awọn aiyipada Collapse ihuwasi lati ṣẹda ohun accordion. Lati ṣaṣeyọri aṣa ara accordion daradara, rii daju lati lo .accordionbi iwe-iṣọ kan.

Diẹ ninu akoonu dimu fun igbimọ accordion akọkọ. Yi nronu ti wa ni han nipa aiyipada, o ṣeun si awọn .showkilasi.

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>

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 nfa ohun elo iṣakoso miiran tun ti so mọ ipin kanna ti o le ṣubu). Ti eroja HTML ti iṣakoso kii ṣe bọtini kan (fun apẹẹrẹ, ohun <a>tabi <div>), abuda naarole="button"yẹ ki o wa ni afikun si awọn ano.

Ti ohun elo iṣakoso rẹ ba n fojusi ohun elo ikojọpọ kan ṣoṣo - ie data-targetabuda naa n tọka si idoluyan - o yẹ ki o ṣafikun abuda naa aria-controlssi ipin iṣakoso, ti o ni awọn idti eroja ikojọpọ naa. 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ẹ.

Ṣakiyesi pe imuse lọwọlọwọ Bootstrap ko bo ọpọlọpọ awọn ibaraenisepo keyboard ti a ṣapejuwe ninu ilana Itọnisọna Awọn adaṣe Akọwe ARIA - iwọ yoo nilo lati ṣafikun wọnyi funrararẹ pẹlu JavaScript aṣa.

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-toggle="collapse"ati a data-targetsi eroja lati fi iṣakoso laifọwọyi ti ọkan tabi diẹ ẹ sii awọn eroja ikojọpọ. Ẹya naa data-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-parent="#selector". Tọkasi demo lati wo eyi ni iṣe.

Nipasẹ JavaScript

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

$('.collapse').collapse()

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-, bi ninu data-parent="".

Oruko Iru Aiyipada Apejuwe
obi yiyan | ohun jQuery | DOM eroja eke 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.
yipada boolian ooto 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 .

.collapse(options)

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

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

.collapse('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).

.collapse('show')

Ṣe afihan eroja ti o le ṣubu. Pada si olupe ṣaaju ki ohun elo ti o le kolu ti han gangan (ie ṣaaju ki shown.bs.collapseiṣẹlẹ naa to waye).

.collapse('hide')

Ìbòmọlẹ ohun kan collapsible. Pada si olupe ṣaaju ki nkan ti o le kolu ti farapamọ nitootọ (ie ṣaaju ki hidden.bs.collapseiṣẹlẹ naa to waye).

.collapse('dispose')

O run ohun ano ká Collapse.

Awọn iṣẹlẹ

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

Iṣẹlẹ Iru Apejuwe
fihan.bs.colapse Yi iṣẹlẹ ina lẹsẹkẹsẹ nigbati awọn showapẹẹrẹ ọna ti a npe ni.
ti a fihan.bs.kolapse 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).
tọju.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.
farasin.bs.colapse 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).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})