Jiberhevketin
Bi çend dersan û pêvekên me yên JavaScript-ê dîtina naverokê li seranserê projeya xwe biguhezînin.
Çawa dixebite
Pêveka têkçûyî ya JavaScript-ê ji bo nîşankirin û veşartina naverokê tê bikar anîn. Bişkok an lenger wekî tetikan têne bikar anîn ku ji hêmanên taybetî yên ku hûn diguhezînin têne nexşe kirin. Hilweşîna hêmanek dê height
ji nirxa wê ya heyî berbi 0
. Ji ber ku CSS çawa anîmasyonan digire, hûn nekarin padding
li ser .collapse
hêmanek bikar bînin. Di şûna wê de, polê wekî hêmanek pêça serbixwe bikar bînin.
prefers-reduced-motion
medyayê ve girêdayî ye. Binêre
beşa tevgera kêmkirî ya belgeya gihîştina me .
Mînak
Bişkojkên jêrîn bikirtînin da ku elementek din bi guhertinên polê ve nîşan bidin û veşêrin:
.collapse
naverokê vedişêre.collapsing
di dema veguherînan de tê sepandin.collapse.show
naverokê nîşan dide
Bi gelemperî, em pêşniyar dikin ku bişkojek bi data-target
taybetmendiyê bikar bînin. Dema ku ji hêla semantîkî ve nayê pêşniyar kirin, hûn dikarin girêdanek bi href
taybetmendiyê (û a role="button"
) jî bikar bînin. Di her du rewşan de, data-toggle="collapse"
pêdivî ye.
<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>
Asumane
Pêveka hilweşînê di heman demê de hilweşîna horizontal piştgirî dike. .width
Çîna guhêrbar lê zêde bikin da ku li şûna width
wê veguhezînin height
û a width
li ser hêmana zarokê ya yekser saz bikin. Hûn bi dilxwazî binivîsin Sass-a xweya xwerû, şêwazên hundurîn bikar bînin, an karûbarên meya firehiyê bikar bînin .
min-height
heye ku di belgeyên me de ji nûvekirina zêde nemîne, ev bi eşkere ne hewce ye.
Tenê width
hêmana li ser zarokê pêdivî ye.
<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>
Gelek armancên
A <button>
an <a>
dikare gelek hêmanan nîşan bide û veşêre bi referanskirina wan bi hilbijêrek JQuery di nav xwe href
an data-target
taybetmendiya xwe de. Gelek <button>
an jî <a>
dikarin hêmanekê nîşan bidin û veşêrin heke ew her yek bi taybetmendiya href
xwe jê re referans bikindata-target
<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>
Mînaka Accordion
Bi karanîna pêkhateya qertê , hûn dikarin tevgera hilweşîna xwerû dirêj bikin da ku akordeyonek biafirînin. Ji bo ku hûn bi rêkûpêk şêwaza accordionê bi dest bixin, pê ewle bin ku hûn .accordion
wekî pêçek bikar bînin.
.show
Bi saya polê
, ev panel ji hêla xwerû ve tê xuyang kirin
.<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>
Gihîştina
Bawer bikin aria-expanded
ku li hêmana kontrolê zêde bikin. Ev taybetmendî bi eşkere rewşa heyî ya hêmana hilweşandî ya ku bi kontrola xwendevanên ekranê û teknolojiyên arîkar ên mîna wan ve girêdayî ye radigihîne. Ger hêmana hilavêtinê ji hêla xwerû ve girtî be, divê taybetmendiya li ser hêmana kontrolê xwedî nirxek be aria-expanded="false"
. Ger we hêmana hilavêtinê destnîşan kiriye ku ji hêla xwerû ve bi karanîna show
polê vekirî be, aria-expanded="true"
li şûna wê li ser kontrolê bicîh bikin. Pêvek dê bixweber vê taybetmendiyê li ser kontrolê biguherîne li ser bingeha ku hêmana hilweşandî hatiye vekirin an girtî (bi rêya JavaScript, an ji ber ku bikarhêner hêmanek kontrolê ya din jî bi heman hêmana hilweşandî ve girêdayî ye vekiriye). Ger hêmana HTML ya hêmana kontrolê ne bişkokek be (mînak, an <a>
an <div>
), taybetmendîrole="button"
divê li hêmanê were zêdekirin.
Ger hêmana weya kontrolê hêmanek yekane ya hilaweşker hedef digire - ango data-target
taybetmendî îşaret bi id
hilbijêrek dike - divê hûn aria-controls
taybetmendiyê li hêmana kontrolê zêde bikin, ku id
hêmana hilavêtinê tê de ye. Xwendevanên ekrana nûjen û teknolojiyên arîkar ên bi vî rengî vê taybetmendiyê bikar tînin da ku ji bikarhêneran kurtebirên zêde peyda bikin da ku rasterast li hêmana hilweşandî bixwe bigerin.
Bala xwe bidinê ku bicîhkirina Bootstrap-ê ya heyî, danûstendinên cihêreng ên klavyeyê yên ku di şêwaza akordeyonê ya Rêbernameya Pratîkên Nivîskariyê ARIA de hatine vegotin nagire - hûn ê hewce bikin ku van bi xwe bi JavaScript-a xwerû re têkildar bikin.
Bikaranîna
Pêveka hilweşînê ji bo hilgirtina giran çend dersan bikar tîne:
.collapse
naverokê vedişêre.collapse.show
naverokê nîşan dide.collapsing
dema ku veguheztin dest pê dike tê zêdekirin, û dema ku ew qediya tê jêbirin
Van dersan dikarin li _transitions.scss
.
Bi taybetmendiyên daneyê
Tenê data-toggle="collapse"
û a data-target
li hêmanê zêde bikin da ku bixweber kontrola yek an jî çend hêmanên hilweşandî destnîşan bikin. Taybetmendî data-target
hilbijêrek CSS-ê qebûl dike ku hilweşînê li ser bicîh bike. Bawer bikin ku polê collapse
li hêmana hilweşandî zêde bikin. Heke hûn dixwazin ku ew bi xweber vebe, çîna pêvek zêde bikin show
.
Ji bo ku rêveberiya komê ya mîna akordeyonê li deverek hilweşandî zêde bikin, taybetmendiya daneyê zêde bikin data-parent="#selector"
. Ji bo ku hûn vê di çalakiyê de bibînin, serî li demo bidin.
Bi rêya JavaScript
Bi destan çalak bike bi:
$('.collapse').collapse()
Vebijêrk
Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-
, wekî di data-parent=""
.
Nav | Awa | Destçûnî | Terîf |
---|---|---|---|
dê û bav | hilbijêr | jQuery object | hêmana DOM | şaş | Ger dêûbav were peyda kirin, wê hingê dê hemî hêmanên hilweşandî yên di binê dêûbavê diyarkirî de werin girtin dema ku ev tişta hilvekirî were xuyang kirin. (wek behreya akordionê ya kevneşopî - ev bi polê ve girêdayî card ye). Pêdivî ye ku taybetmendî li ser devera hilweşandî ya armanc were danîn. |
toggle | boolean | rast | Li ser bangkirinê hêmana hilweşandî vedike |
Methods
Rêbaz û veguherînên asynchronous
Hemî rêbazên API-ê asînkron in û veguherînek dest pê dikin . Gava ku veguhêz dest pê kir lê berî ku biqede ew vedigerin bangkerê . Wekî din, bangek rêbazek li ser pêkhateyek veguhêz dê were paşguh kirin.
.collapse(options)
Naveroka we wekî hêmanek hilweşandî çalak dike. Vebijarkek vebijarkî qebûl object
dike.
$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle')
Hêmanek dagirtî ji bo xuyangkirin an veşartinê vedigire. Berî ku hêmana hilavêtinê bi rastî were xuyang kirin an veşartin (ango berî ku bûyer shown.bs.collapse
an hidden.bs.collapse
bûyer çêbibe) vedigere bangkerê.
.collapse('show')
Elementeke davekirî nîşan dide. Berî ku hêmana hilavêtinê bi rastî were xuyang kirin (ango berî ku shown.bs.collapse
bûyer çêbibe) vedigere bangkerê.
.collapse('hide')
Hêmanek hilweşandî vedişêre. Berî ku hêmana hilavêtinê bi rastî were veşartin (ango berî ku hidden.bs.collapse
bûyer çêbibe) vedigere bangkerê.
.collapse('dispose')
Hilweşîna hêmanekê hilweşîne.
Events
Dersa hilweşînê ya Bootstrap çend bûyeran ji bo girêdana fonksiyona hilweşînê eşkere dike.
Cureyê bûyerê | Terîf |
---|---|
nîşan bide.bs.hilweşîn | show Dema ku rêbaza nimûneyê tê gazî kirin ev bûyer tavilê dişewite. |
nîşan dan.bs.hilweşîn | Dema ku hêmanek hilweşandî ji bikarhêner re xuya bibe ev bûyer tê şewitandin (dê li bendê bimîne ku veguheztinên CSS temam bibin). |
veşartin.bs.hilweşîn | hide Dema ku rêbaz hate gazî kirin ev bûyer yekser tê şewitandin . |
veşartî.bs.hilweşîn | Dema ku hêmanek hilweşandî ji bikarhêner ve hatî veşartin ev bûyer tê şewitandin (dê li bendê bimîne ku veguheztinên CSS temam bibin). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})