Subu
Yi hihan akoonu kọja iṣẹ akanṣe rẹ pẹlu awọn kilasi diẹ ati awọn afikun JavaScript wa.
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.
<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>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
<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>Lilo awọn paati kaadi , o le fa awọn aiyipada Collapse ihuwasi lati ṣẹda ohun accordion.
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" 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="#accordion">
<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" 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="#accordion">
<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" 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="#accordion">
<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>Rii daju lati ṣafikun aria-expandedsi ipin iṣakoso. Ẹya-ara yii ṣe afihan ni gbangba ipo lọwọlọwọ ti ohun elo ikojọpọ 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 collapsbile kanna). Ti eroja HTML ti iṣakoso kii ṣe bọtini (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 ṣalaye ninu ilana Aṣẹ alakọwe WAI-ARIA 1.1 - iwọ yoo nilo lati ṣafikun iwọnyi funrararẹ pẹlu JavaScript aṣa.
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.
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.
Mu ṣiṣẹ pẹlu ọwọ pẹlu:
$('.collapse').collapse()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 collapable. |
| yipada | boolianu | ooto | Yipada eroja ti o le kolu lori ẹbẹ |
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 .
Mu akoonu rẹ ṣiṣẹ bi eroja ti o le kolu. Gba awọn aṣayan iyan object.
$('#myCollapsible').collapse({
toggle: false
})Yipada eroja ti o le kolu lati ṣafihan 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).
Ṣe afihan eroja ti o le ṣubu. Pada si olupe ṣaaju ki nkan ti o le kọlu ti han ni otitọ (ie ṣaaju ki shown.bs.collapseiṣẹlẹ naa to waye).
Ì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).
O run ohun ano ká Collapse.
Kilasi Collapse Bootstrap ṣafihan awọn iṣẹlẹ diẹ fun sisọ sinu iṣẹ ṣiṣe iṣubu.
| Iṣẹlẹ Iru | Apejuwe |
|---|---|
| fihan.bs.kolapse | 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 nkan idaruku 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…
})