Source

Subu

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.

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

O le lo ọna asopọ kan pẹlu hrefabuda, tabi bọtini kan pẹlu data-targetabuda. Ni awọn ọran mejeeji, o data-toggle="collapse"nilo.

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>

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

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>

Accordion apẹẹrẹ

Lilo awọn paati kaadi , o le fa awọn aiyipada Collapse ihuwasi lati ṣẹda ohun accordion.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry Richardson ad squid. 3 Ikooko oṣupa officia aute, ti kii cupidatat skateboard dolor brunch. Ounjẹ ikoledanu quinoa nesciunt laborum eiusmod. Brunch 3 Ikooko oṣupa tempor, sunt aliqua fi kan eye lori o squid nikan-Oti kofi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft ọti labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher igbakeji lomo. Leggings occaecat iṣẹ ọti oko-to-tabili, aise Denimu darapupo synth nesciunt o jasi ti ko ba ti gbọ ti wọn accusamus laala alagbero 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 class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" 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="#accordionExample">
      <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" type="button" 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="#accordionExample">
      <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" type="button" 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="#accordionExample">
      <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>

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 collapsbile kanna). 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 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ẹ.

Ṣakiyesi pe imuse lọwọlọwọ Bootstrap ko bo ọpọlọpọ awọn ibaraenisepo keyboard ti a ṣalaye ninu ilana Aṣẹ alakọwe WAI-ARIA 1.1 - iwọ yoo nilo lati ṣafikun iwọ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…
})