Biçe ser naveroka sereke Biçe navîgasyon belgeyan
in English

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ê heightji nirxa wê ya heyî berbi 0. Ji ber ku CSS çawa anîmasyonan digire, hûn nekarin paddingli ser .collapsehêmanek bikar bînin. Di şûna wê de, polê wekî hêmanek pêça serbixwe bikar bînin.

Bandora anîmasyonê ya vê hêmanê bi pirsa prefers-reduced-motionmedyayê 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:

  • .collapsenaverokê vedişêre
  • .collapsingdi dema veguherînan de tê sepandin
  • .collapse.shownaverokê nîşan dide

Bi gelemperî, em pêşniyar dikin ku bişkojek bi data-bs-targettaybetmendiyê bikar bînin. Dema ku ji hêla semantîkî ve nayê pêşniyar kirin, hûn dikarin girêdanek bi hreftaybetmendiyê (û a role="button") jî bikar bînin. Di her du rewşan de, data-bs-toggle="collapse"pêdivî ye.

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-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-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. .collapse-horizontalÇîna guhêrbar lê zêde bikin da ku li şûna widthwê veguhezînin heightû a widthli 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 .

Ji kerema xwe not bikin ku dema ku mînaka li jêr komek min-heightheye ku di belgeyên me de ji nûvekirina zêde nemîne, ev bi eşkere ne hewce ye. Tenê widthhêmana li ser zarokê pêdivî ye.

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-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      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 çend hêmanan nîşan bide û veşêre bi referanskirina wan bi hilbijêrek di nav xwe hrefan data-bs-targettaybetmendiya xwe de. Gelek <button>an jî <a>dikarin hêmanekê nîşan bidin û veşêrin heke ew her yek bi taybetmendiya hrefxwe jê re referans bikindata-bs-target

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-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-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>

Gihîştina

Bawer bikin aria-expandedku 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 showpolê 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î ye (bi 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-bs-targettaybetmendî îşaret bi idhilbijêrek dike - divê hûn aria-controlstaybetmendiyê li hêmana kontrolê zêde bikin, ku idhê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î, têkiliyên cihêreng ên klavyeyê yên vebijarkî yên ku di Nimûneya Akordonê ya WAI-ARIA Nivîsandinê de 1.1 de têne diyar kirin nagire - hûn ê hewce bikin ku van bi xwe bi JavaScript-a xwerû re têxin nav xwe.

Sass

Variables

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

Classes

Dersên veguheztina hilweşînê dikarin tê de werin dîtin ji scss/_transitions.scssber ku ev li gelek pêkhateyan têne parve kirin (hilweşîn û akordeyon).

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

Bikaranîna

Pêveka hilweşînê ji bo hilgirtina giran çend dersan bikar tîne:

  • .collapsenaverokê vedişêre
  • .collapse.shownaverokê nîşan dide
  • .collapsingdema 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-bs-toggle="collapse"û a data-bs-targetli hêmanê zêde bikin da ku bixweber kontrola yek an jî çend hêmanên hilweşandî destnîşan bikin. Taybetmendî data-bs-targethilbijêrek CSS-ê qebûl dike ku hilweşînê li ser bicîh bike. Bawer bikin ku polê collapseli 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-bs-parent="#selector". Ji bo bêtir agahdarî li rûpela accordionê binihêrin .

Bi JavaScript

Bi destan çalak bike bi:

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

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-bs-, wekî di data-bs-parent="".

Nav Awa Destçûnî Terîf
parent hilbijêr | jQuery object | hêmana DOM false 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î cardye). Pêdivî ye ku taybetmendî li ser devera hilweşandî ya armanc were danîn.
toggle boolean true Hêmana hilavêtinê ya li ser bangkirinê vedike

Methods

Rêbaz û veguherînên Asynchronous

Hemî rêbazên API-ê asynkron 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.

Ji bo bêtir agahdarî li belgeya meya JavaScriptê binêre .

Naveroka we wekî hêmanek hilweşandî çalak dike. Vebijarkek vebijarkî qebûl objectdike.

Hûn dikarin bi çêker re mînakek hilweşandinê biafirînin, mînakî:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
Awa Terîf
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.collapsean hidden.bs.collapsebûyer çêbibe) vedigere bangkerê.
show Elementeke davekirî nîşan dide. Berî ku hêmana hilavêtinê bi rastî were xuyang kirin (mînak, berî ku shown.bs.collapsebûyer çêbibe) vedigere bangkerê.
hide Hêmanek hilweşandî vedişêre. Berî ku hêmana hilavêtinê bi rastî were veşartin (mînak, berî ku hidden.bs.collapsebûyer çêbibe) vedigere bangkerê.
dispose Hilweşîna hêmanekê hilweşîne. (Daneyên hilanîn ên li ser hêmana DOM-ê radike)
getInstance Rêbaza statîkî ya ku dihêle hûn mînaka hilweşînê ya ku bi hêmanek DOM-ê ve girêdayî ye bistînin, hûn dikarin wê bi vî rengî bikar bînin:bootstrap.Collapse.getInstance(element)
getOrCreateInstance Rêbaza statîk a ku mînakek hilweşînê ya ku bi hêmanek DOM-ê ve girêdayî ye vedigerîne an heke ew nehatibe destpêkirin yek nû diafirîne. Hûn dikarin wê bi vî rengî bikar bînin:bootstrap.Collapse.getOrCreateInstance(element)

Events

Dersa hilweşînê ya Bootstrap çend bûyeran ji bo girêdana fonksiyona hilweşînê eşkere dike.

Cureyê bûyerê Terîf
show.bs.collapse showDema ku rêbaza nimûneyê tê gazî kirin ev bûyer tavilê dişewite.
shown.bs.collapse 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).
hide.bs.collapse hideDema ku rêbaz hate gazî kirin ev bûyer yekser tê şewitandin .
hidden.bs.collapse Ev bûyer dema ku hêmanek hilweşandî ji bikarhêner ve hatî veşartin tê şewitandin (dê li bendê bimîne ku veguheztinên CSS biqede).
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})