Source

Romahdus

Muuta projektisi sisällön näkyvyyttä muutamilla luokilla ja JavaScript-laajennuksillamme.

Kuinka se toimii

Kutista JavaScript-laajennusta käytetään sisällön näyttämiseen ja piilottamiseen. Painikkeita tai ankkureita käytetään laukaisimina, jotka on yhdistetty tiettyihin elementteihin, joita vaihdat. Elementin tiivistäminen animoi heightsen nykyisestä arvosta arvoon 0. Koska CSS käsittelee animaatioita, et voi käyttää paddingelementissä .collapse. Käytä sen sijaan luokkaa itsenäisenä kääreelementtinä.

Esimerkki

Napsauta alla olevia painikkeita näyttääksesi ja piilottaaksesi toisen elementin luokkamuutosten kautta:

  • .collapsepiilottaa sisällön
  • .collapsingkäytetään siirtymien aikana
  • .collapse.shownäyttää sisältöä

Voit käyttää linkkiä hrefmääritteen kanssa tai painiketta data-targetmääritteen kanssa. Molemmissa tapauksissa data-toggle="collapse"vaaditaan.

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>

Useita kohteita

A <button>tai <a>voi näyttää ja piilottaa useita elementtejä viittaamalla niihin JQuery-valitsimella sen hreftai data-targetattribuutissa. Useita <button>tai <a>voivat näyttää ja piilottaa elementin, jos jokainen viittaa siihen omalla hreftai data-targetattribuutilla

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>

Haitari esimerkki

Korttikomponentin avulla voit laajentaa oletusarvoista tiivistystoimintoa luodaksesi haitari.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunssi. Food truck quinoa nesciunt laborum eiusmod. Brunssi 3 wolf moon tempor, sunt aliqua laita lintu sen päälle kalmari yksialkuperäinen kahvi nulla guessnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegaani, paitsi teurastaja varapääjohtaja. Leggingsit occaecat käsityöolut maatilasta pöytään, raaka denim esteettinen syntetisaattori, et luultavasti ole kuullut niistä accusamus labore kestävää VHS:tä.
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>

Esteettömyys

Muista lisätä aria-expandedohjauselementtiin. Tämä attribuutti välittää nimenomaisesti ohjausobjektiin liitetyn kokoontaitettavan elementin nykyisen tilan näytönlukuohjelmiin ja vastaaviin aputekniikoihin. Jos kokoontaitettava elementti on oletuksena suljettu, ohjauselementin attribuutin arvon tulee olla aria-expanded="false". Jos olet asettanut kokoontaitettavan elementin oletusarvoisesti avoimeksi showluokkaa käyttämällä, aseta aria-expanded="true"sen sijaan ohjausobjekti. Plugin vaihtaa tämän määritteen automaattisesti ohjausobjektissa sen perusteella, onko tiivistettävä elementti avattu vai suljettu (JavaScriptin kautta tai koska käyttäjä laukaisi toisen ohjauselementin, joka on myös sidottu samaan tiivistettävään elementtiin). Jos ohjauselementin HTML-elementti ei ole painike (esim. an <a>tai <div>), määriterole="button"tulee lisätä elementtiin.

Jos ohjauselementtisi kohdistuu yhteen tiivistettävään elementtiin – eli data-targetattribuutti osoittaa idvalitsimeen – sinun tulee lisätä aria-controlsattribuutti ohjauselementtiin, joka sisältää idtiivistettävän elementin. Nykyaikaiset näytönlukijat ja vastaavat aputekniikat hyödyntävät tätä attribuuttia tarjotakseen käyttäjille lisäpikakuvakkeita, joilla he voivat siirtyä suoraan kokoontaitettavaan elementtiin.

Huomaa, että Bootstrapin nykyinen toteutus ei kata erilaisia ​​näppäimistön vuorovaikutuksia, jotka on kuvattu WAI-ARIA Authoring Practices 1.1 harmonikkakuviossa – sinun on sisällytettävä ne itse mukautetulla JavaScriptillä.

Käyttö

Collapse-laajennus käyttää muutamia luokkia raskaiden nostojen käsittelemiseen:

  • .collapsepiilottaa sisällön
  • .collapse.shownäyttää sisällön
  • .collapsinglisätään, kun siirtymä alkaa, ja poistetaan, kun se päättyy

Nämä luokat löytyvät _transitions.scss.

Tietomääritteiden kautta

Lisää vain data-toggle="collapse"ja a data-targetelementtiin määrittääksesi automaattisesti yhden tai useamman kokoontaitettavan elementin hallinnan. Attribuutti data-targethyväksyy CSS-valitsimen, johon tiivistys sovelletaan. Muista lisätä luokka collapsekokoontaitettavaan elementtiin. Jos haluat sen avautuvan oletusarvoisesti, lisää ylimääräinen luokka show.

Jos haluat lisätä haitarimaista ryhmähallintaa kokoontaitettavalle alueelle, lisää data-attribuutti data-parent="#selector". Katso demo nähdäksesi tämän toiminnassa.

JavaScriptin kautta

Ota käyttöön manuaalisesti:

$('.collapse').collapse()

Vaihtoehdot

Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-, kuten kohdassa data-parent="".

Nimi Tyyppi Oletus Kuvaus
vanhempi valitsin | jQuery-objekti | DOM-elementti väärä Jos ylätaso on annettu, kaikki määritetyn ylätason alapuolella olevat tiivistettävät elementit suljetaan, kun tämä tiivistettävä kohde näytetään. (samanlainen kuin perinteinen haitarikäyttäytyminen - tämä riippuu cardluokasta). Attribuutti on asetettava kohdealueelle.
vaihtaa boolean totta Vaihtaa kokoontaitettavan elementin kutsun yhteydessä

menetelmät

Asynkroniset menetelmät ja siirtymät

Kaikki API - menetelmät ovat asynkronisia ja aloittavat siirtymän . He palaavat soittajan luo heti siirtymisen alkaessa, mutta ennen sen päättymistä . Lisäksi siirtyvän komponentin menetelmäkutsu jätetään huomioimatta .

Katso lisätietoja JavaScript-dokumentaatiostamme.

.collapse(options)

Aktivoi sisältösi kokoontaitettavana elementtinä. Hyväksyy valinnaiset vaihtoehdot object.

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

.collapse('toggle')

Vaihtaa kokoontaitettavan elementin näytettäväksi tai piilotetuksi. Palaa soittajalle ennen kuin kokoontaitettava elementti on todella näkyvissä tai piilotettu (ts. ennen shown.bs.collapsetai hidden.bs.collapsetapahtumaa).

.collapse('show')

Näyttää kokoontaitettavan elementin. Palaa soittajalle ennen kuin kokoontaitettava elementti on todella näytetty (eli ennen shown.bs.collapsetapahtumaa).

.collapse('hide')

Piilottaa kokoontaitettavan elementin. Palaa soittajalle ennen kuin kokoontaitettava elementti on todella piilotettu (eli ennen hidden.bs.collapsetapahtuman tapahtumista).

.collapse('dispose')

Tuhoaa elementin romahduksen.

Tapahtumat

Bootstrapin tiivistysluokka paljastaa muutamia tapahtumia, jotka liittyvät tiivistystoimintoon.

Tapahtumatyyppi Kuvaus
show.bs.collapse Tämä tapahtuma käynnistyy välittömästi, kun showinstanssimenetelmää kutsutaan.
näytetään.bs.kutistuminen Tämä tapahtuma käynnistyy, kun tiivistyselementti on tehty näkyväksi käyttäjälle (odottaa CSS-siirtymien valmistumista).
hide.bs.collapse Tämä tapahtuma käynnistyy välittömästi, kun hidemenetelmä on kutsuttu.
piilotettu.bs.collapse Tämä tapahtuma käynnistyy, kun tiivistyselementti on piilotettu käyttäjältä (odottaa CSS-siirtymien valmistumista). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})