Tolestu

Aldatu zure proiektuko edukiaren ikusgarritasuna klase batzuekin eta gure JavaScript pluginekin.

Nola dabil

Tolestu JavaScript plugina edukia erakusteko eta ezkutatzeko erabiltzen da. Botoiak edo aingurak aktibatzen dituzun elementu espezifikoekin mapatzen diren abiarazle gisa erabiltzen dira. heightElementu bat tolestuz gero , bere uneko baliotik animatuko da 0. CSS-k animazioak nola kudeatzen dituen ikusita, ezin duzu elementu paddingbatean erabili. .collapseHorren ordez, erabili klasea biltzeko elementu independente gisa.

Osagai honen animazio-efektua prefers-reduced-motionmultimedia kontsultaren menpe dago. Ikusi gure irisgarritasun-dokumentazioaren mugimendu murriztuaren atala .

Adibidea

Egin klik beheko botoietan klase aldaketen bidez beste elementu bat erakusteko eta ezkutatzeko:

.collapseedukia ezkutatzen du
.collapsingtrantsizioetan aplikatzen da
.collapse.showedukia erakusten du

Atributua duen esteka bat erabil dezakezu href, edo atributua duen botoi bat data-target. Bi kasuetan, data-toggle="collapse"beharrezkoa da.

Estekatu href-rekin

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>

Helburu anitz

A <button>edo <a>elementu anitz erakutsi eta ezkutatu ditzake JQuery hautatzaile batekin erreferentzia eginez bere hrefedo data-targetatributuan. Anitzak <button>edo <a>elementu bat erakutsi eta ezkutatu dezake bakoitzak bere hrefedo data-targetatributuarekin erreferentzia egiten badio

Aldatu lehen elementua

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>

Akordeoiaren adibidea

Txartelaren osagaia erabiliz, tolestearen portaera lehenetsia heda dezakezu akordeoia sortzeko. Akordeoi estiloa behar bezala lortzeko, ziurtatu .accordionbilgarri gisa erabiltzen duzula.

Besteak beste, klixea erreklamatzea, bizimodu handia salatu Terry Richardson eta txipiroiak. 3 wolf moon ofiziala aute, ez cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 otsoaren ilargiaren denbora, baina txori bat jarri txipiroiak jatorri bakarreko kafea ez du hartu shoreditch eta. Nihil anim keffiyeh helvetica, artisau garagardoa lan egiteko wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur harategia vice lomo. Leggings occaecat artisau garagardoa baserritik mahaira, raw denim estetiko sintetizadoreak ziurrenik ez dituzu entzun VHS jasangarria salatu.

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">
      <h2 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>
      </h2>
    </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">
      <h2 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>
      </h2>
    </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">
      <h2 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>
      </h2>
    </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>

Irisgarritasuna

Ziurtatu aria-expandedkontrol-elementuari gehitzea. Atributu honek modu esplizituan adierazten die kontrolarekin lotutako elementu tolesgarriaren egungo egoera pantaila-irakurleei eta antzeko laguntza-teknologiei. Elementu tolesgarria lehenespenez itxita badago, kontrol-elementuaren atributuak balio izan beharko luke aria-expanded="false". Elementu tolesgarria lehenespenez irekita egon dadin ezarri baduzu showklasea erabiliz, ezarri aria-expanded="true"kontrolaren ordez. Pluginak atributu hau automatikoki aldatuko du kontrolean, elementu tolesgarria ireki edo itxi den ala ez kontuan hartuta (JavaScript bidez edo erabiltzaileak elementu tolesgarri berari lotuta dagoen beste kontrol-elementu bat abiarazi duelako). Kontrol-elementuaren HTML elementua botoi bat ez bada (adibidez, an <a>edo <div>), atributuarole="button"elementuari gehitu behar zaio.

Zure kontrol-elementuak elementu tolesgarri bakar batera bideratzen badu (hau da, data-targetatributuak idhautatzaile batera seinalatzen badu) atributua gehitu behar diozu aria-controlskontrol-elementuari, idelementu tolesgarria duen. Pantaila-irakurle modernoek eta antzeko laguntza-teknologiek atributu hau erabiltzen dute erabiltzaileei lasterbide osagarriak eskaintzeko, elementu tolesgarrira zuzenean nabigatzeko.

Kontuan izan Bootstrap-en egungo inplementazioak ez dituela WAI-ARIA Authoring Practices 1.1 akordeoi ereduan deskribatutako teklatu-interakzio desberdinak estaltzen; zuk zeuk sartu beharko dituzu JavaScript pertsonalizatuarekin.

Erabilera

Tolestu pluginak klase batzuk erabiltzen ditu astunak kudeatzeko:

.collapseedukia ezkutatzen du
.collapse.showedukia erakusten du
.collapsingtrantsizioa hasten denean gehitzen da, eta amaitzean kentzen da

Klase hauek atalean aurki daitezke _transitions.scss.

Datu-atributuen bidez

Gehitu data-toggle="collapse"eta a data-targetelementuari elementu tolesgarri baten edo gehiagoren kontrola automatikoki esleitzeko. Atributuak CSS hautatzaile bat onartzen du data-targetkolapsoa aplikatzeko. Ziurtatu klasea gehitzen duzula collapseelementu tolesgarrian. Lehenetsita irekitzea nahi baduzu, gehitu klase gehigarria show.

Akordeoi moduko taldeen kudeaketa eremu tolesgarri batean gehitzeko, gehitu datu-atributua data-parent="#selector". Ikusi demoa hau martxan ikusteko.

JavaScript bidez

Gaitu eskuz honekin:

$('.collapse').collapse()

Aukerak

Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-, hemen bezala data-parent="".

Izena	Mota	Lehenetsia	Deskribapena
gurasoa	hautatzailea \| jQuery objektua \| DOM elementua	faltsua	Gurasoa ematen bada, zehaztutako gurasoaren azpian dauden elementu tolesgarri guztiak itxiko dira elementu tolesgarri hau erakusten denean. (akordeoiaren portaera tradizionalaren antzekoa - hau `card`klasearen araberakoa da). Atributua helburuko eremu tolesgarrian ezarri behar da.
txandakatu	boolearra	egia	Elementu tolesgarria aktibatzen du deitzean

Metodoak

Metodo asinkronoak eta trantsizioak

API metodo guztiak asinkronoak dira eta trantsizio bat hasten dute . Trantsizioa hasi bezain laster baina amaitu baino lehen itzultzen dira deitzailearengana . Gainera, trantsizio-osagai baten metodo-dei bati ez ikusi egingo zaio .

Ikus gure JavaScript dokumentazioa informazio gehiago lortzeko .

`.collapse(options)`

Zure edukia elementu tolesgarri gisa aktibatzen du. Aukerako aukerak onartzen ditu object.

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

`.collapse('toggle')`

Elementu tolesgarri bat bistaratzen edo ezkutuan jartzen du. Deitzen duenari itzultzen zaio elementu tolesgarria benetan erakutsi edo ezkutatu aurretik (hau da, shown.bs.collapseedo hidden.bs.collapsegertaera gertatu baino lehen).

`.collapse('show')`

Elementu tolesgarria erakusten du. Deitzen duenari itzultzen zaio elementu tolesgarria benetan erakutsi aurretik (hau da, shown.bs.collapsegertaera gertatu baino lehen).

`.collapse('hide')`

Elementu tolesgarri bat ezkutatzen du. Elementu tolesgarria benetan ezkutatu aurretik (hau da, hidden.bs.collapsegertaera gertatu baino lehen) itzultzen da deitzaileari.

`.collapse('dispose')`

Elementu baten kolapsoa suntsitzen du.

Gertaerak

Bootstrap-en kolapso-klaseak kolapso-funtzionalitatean konektatzeko gertaera batzuk erakusten ditu.

Gertaera mota	Deskribapena
erakutsi.bs.kolapsoa	Gertaera hau berehala abiarazten da `show`instantzia-metodoa deitzen denean.
erakutsi.bs.kolapsoa	Gertaera hau tolesteko elementu bat erabiltzailearentzat ikusgai jartzen denean abiarazten da (CSS trantsizioak amaitu arte itxarongo da).
ezkutatu.bs.kolapsoa	Gertaera hau berehala abiarazten da `hide`metodoa deitzen denean.
ezkutuan.bs.kolapsoa	Gertaera hau tolesteko elementu bat erabiltzaileari ezkutatu zaionean abiarazten da (CSS trantsizioak amaitu arte itxarongo da).

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})