Source

Gusenyuka

Kuzuza ibiboneka mumushinga wawe hamwe namasomo make hamwe na plugin yacu ya JavaScript.

Uburyo ikora

Gusenyuka JavaScript plugin ikoreshwa mukwerekana no guhisha ibirimo. Utubuto cyangwa inanga zikoreshwa nka trigger zashizwe kumurongo wihariye uhinduranya. Gusenyuka ikintu kizashushanya i heightkuva agaciro kayo kugeza 0. Urebye uko CSS ikora animasiyo, ntushobora gukoresha paddingkubintu .collapse. Ahubwo, koresha urwego nkibintu byigenga bipfunyika.

Urugero

Kanda buto hepfo kugirango werekane kandi uhishe ikindi kintu ukoresheje impinduka zamasomo:

  • .collapseahisha ibirimo
  • .collapsingni Byakoreshejwe Mugihe Cyinzibacyuho
  • .collapse.showyerekana ibirimo

Urashobora gukoresha umurongo hamwe hrefnibiranga, cyangwa buto hamwe data-targetnibiranga. Muri ibyo bihe byombi, data-toggle="collapse"urasabwa.

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>

Intego nyinshi

A <button>cyangwa <a>irashobora kwerekana no guhisha ibintu byinshi mubohereza hamwe na JQuery utoranya muri yo hrefcyangwa data-targetikiranga. Igwije <button>cyangwa irashobora kwerekana no <a>guhisha ikintu niba buriwese abigaragaza hamwe nibirangahrefdata-target

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>

Urugero

Ukoresheje ikarita , urashobora kwagura imyitwarire isanzwe yo gusenyuka kugirango ukore akabari.

Anim pariatur cliche reprehenderit, enim eiusmod ubuzima bwo hejuru accusamus terry richardson ad squid. 3 impyisi ukwezi officia aute, non cupidatat skateboard dolor brunch. Ikamyo y'ibiryo quinoa nesciunt laborum eiusmod. Brunch 3 impyisi ukwezi kwigihe, sunt aliqua shyiramo inyoni kuri squid inkomoko imwe yikawa nulla assome shoreditch et. Nihil anim keffiyeh helvetica, ubukorikori bwinzoga labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat ubukorikori bwinzoga umurima-kumeza, mbisi denim estetique synth nesciunt ushobora kuba utarigeze wumva bavuga accusamus labore irambye 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>

Kuboneka

Witondere kongera aria-expandedkubintu bigenzura. Iyi miterere yerekana neza uko ibintu bimeze ubu ibintu byangirika bihujwe no kugenzura kugenzura abasomyi hamwe na tekinoroji ifasha. Niba ikintu gishobora gusenyuka gifunzwe byanze bikunze, ikiranga kugenzura ikintu kigomba kugira agaciro ka aria-expanded="false". Niba washyizeho ikintu gishobora gusenyuka kugirango ufungure byanze bikunze ukoresheje urwego show, shyira aria-expanded="true"kugenzura aho. Gucomeka izahita ihindura iyi miterere kubigenzuzi ukurikije niba ikintu gishobora kugwa cyarafunguwe cyangwa gifunze (binyuze kuri JavaScript, cyangwa kubera ko uyikoresha yatumije ikindi kintu cyo kugenzura nacyo kijyanye nibintu bimwe bisenyuka). Niba igenzura ryibintu bya HTML bitari buto (urugero, an <a>cyangwa <div>), ikirangarole="button"bigomba kongerwaho kubintu.

Niba igikoresho cyawe cyo kugenzura kireba ikintu kimwe gishobora gusenyuka - ni ukuvuga data-targetikiranga cyerekana iduwatoranije - ugomba kongeramo aria-controlsikiranga kugenzura ibintu, bikubiyemo idibintu byangirika. Abasomyi ba kijyambere bigezweho hamwe na tekinoroji ifasha ikoresha iyi miterere kugirango itange abakoresha andi magufi kugirango bayobore neza kubintu byangirika ubwabyo.

Menya ko Bootstrap ishyirwa mubikorwa ntabwo ikubiyemo imikoranire itandukanye ya clavier yasobanuwe mubikorwa bya WAI-ARIA Kwandika imyitozo 1.1 ya bordion - uzakenera gushyiramo wowe ubwawe hamwe na JavaScript yihariye.

Ikoreshwa

Gusenyuka plugin ikoresha ibyiciro bike kugirango ikemure ibintu biremereye:

  • .collapseahisha ibirimo
  • .collapse.showyerekana ibirimo
  • .collapsingyongeweho iyo inzibacyuho itangiye, ikanakurwaho iyo irangiye

Aya masomo murayasanga muri _transitions.scss.

Binyuze mu biranga amakuru

Gusa ongeraho data-toggle="collapse"na a data-targetkubintu kugirango uhite ugenera kugenzura ikintu kimwe cyangwa byinshi bishobora gusenyuka. Ikiranga data-targetcyakira CSS uhitamo kugirango akoreshe gusenyuka kuri. Wemeze kongeramo urwego collapsekubintu bishobora kugwa. Niba wifuza ko byafungura, ongeraho urwego rwinyongera show.

Kugirango wongere imiyoborere isa nitsinda ryubuyobozi ahantu hashobora gusenyuka, ongeramo amakuru ikiranga data-parent="#selector". Reba kuri demo kugirango ubone ibi mubikorwa.

Binyuze kuri JavaScript

Gushoboza intoki hamwe na:

$('.collapse').collapse()

Amahitamo

Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Izina Izina Kuri data-, Nka Muri data-parent="".

Izina Andika Mburabuzi Ibisobanuro
umubyeyi uwatoranije | Ikintu cyibibazo | Ikintu cya DOM ibinyoma Niba umubyeyi atanzwe, noneho ibintu byose bishobora gusenyuka munsi yumubyeyi wabigenewe bizafungwa mugihe iki kintu gishobora kugwa. (bisa nimyitwarire ya gakondo ya gakondo - ibi biterwa cardnurwego). Ikiranga kigomba gushyirwaho ku ntego ishobora kugwa.
guhinduranya boolean ni ukuri Kuzuza ibintu bishobora kugwa kuri invocation

Uburyo

Uburyo butajegajega ninzibacyuho

Inzira zose za API ntizihuza kandi zitangira inzibacyuho . Basubira kumuhamagara mugihe inzibacyuho itangiye ariko itararangira . Mubyongeyeho, uburyo bwo guhamagarira ibice byinzibacyuho bizirengagizwa .

Reba inyandiko zacu za JavaScript kubindi bisobanuro.

.collapse(options)

Koresha ibikubiyemo nkibintu bishobora kugwa. Emera amahitamo object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Kuzuza ikintu gishobora kugwa kugirango cyerekanwe cyangwa cyihishe. Garuka kumuhamagara mbere yuko ikintu gishobora kugwa cyerekanwe cyangwa cyihishe (ni ukuvuga mbere yuko ibyabaye shown.bs.collapsecyangwa hidden.bs.collapseibyabaye bibaho).

.collapse('show')

Erekana ikintu gishobora kugwa. Garuka kumuhamagara mbere yuko ibintu byangirika byerekanwe mubyukuri (nukuvuga mbere yuko shown.bs.collapseibyabaye bibaho).

.collapse('hide')

Hisha ikintu gishobora kugwa. Garuka kumuhamagara mbere yuko ikintu gishobora kugwa cyihishe mubyukuri (nukuvuga mbere yuko hidden.bs.collapseibyabaye biba).

.collapse('dispose')

Gusenya ikintu cyo gusenyuka.

Ibyabaye

Bootstrap yo gusenyuka ibyiciro byerekana ibintu bike byo guhuza ibikorwa.

Ubwoko bwibyabaye Ibisobanuro
kwerekana.bs.isenyuka Ibirori birasa ako kanya mugihe showurugero rwitwa.
yerekanwe.bs.isenyuka Ibi birori birukanwa mugihe ikintu cyo gusenyuka cyakozwe kigaragara kubakoresha (bizategereza ko inzibacyuho ya CSS irangira).
guhisha.bs. gusenyuka Iki gikorwa kirahita gihita iyo hideuburyo bwahamagawe.
guhisha.bs.isenyuka Ibirori birukanwa mugihe ikintu cyo gusenyuka cyihishe kumukoresha (uzategereza ko inzibacyuho ya CSS irangira). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})