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 height
lati iye lọwọlọwọ si 0
. Fun bi CSS ṣe n kapa awọn ohun idanilaraya, o ko le lo padding
lori .collapse
eroja kan. Dipo, lo kilaasi bi ohun elo murasilẹ ominira.
prefers-reduced-motion
ibeere 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:
.collapse
hides akoonu.collapsing
ti lo lakoko awọn iyipada.collapse.show
fihan akoonu
Ni gbogbogbo, a ṣeduro lilo bọtini kan pẹlu data-target
abuda naa. Lakoko ti a ko ṣeduro lati oju wiwo atunmọ, o tun le lo ọna asopọ kan pẹlu href
abuda (ati a role="button"
). 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">
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 .width
modifier kilasi lati orilede width
dipo height
ki o si ṣeto a width
lori 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 .
min-height
lati yago fun awọn atunṣe pupọ ninu awọn iwe aṣẹ wa, eyi ko nilo ni gbangba.
Nikan width
lori ọmọ ano wa ni ti beere.
<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ẹ href
tabi 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 href
tabi data-target
ikasi
<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 .accordion
bi iwe-iṣọ kan.
.show
kilasi.
<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-expanded
si 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 show
kilasi, ṣ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-target
abuda naa n tọka si id
oluyan - o yẹ ki o ṣafikun abuda naa aria-controls
si ipin iṣakoso, ti o ni awọn id
ti 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:
.collapse
hides awọn akoonu.collapse.show
fihan akoonu.collapsing
ti 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-target
si eroja lati fi iṣakoso laifọwọyi ti ọkan tabi diẹ ẹ sii awọn eroja ikojọpọ. Ẹya naa data-target
gba oluyan CSS kan lati lo iṣubu si. Rii daju lati ṣafikun kilasi collapse
naa 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 card kilasi). Ẹ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 .
.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.collapse
tabi hidden.bs.collapse
iṣẹ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.collapse
iṣẹ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.collapse
iṣẹ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 show apẹẹ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...
})