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öä

Yleensä suosittelemme painikkeen käyttöä data-targetmääritteen kanssa. Vaikka sitä ei suositella semanttisesta näkökulmasta, voit myös käyttää linkkiä hrefattribuutilla (ja role="button"). Molemmissa tapauksissa data-toggle="collapse"vaaditaan.

<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>

Vaakasuora

Collapse plugin tukee myös vaakasuuntaista kutistamista. Lisää .widthmuuntajaluokka siirtääksesi sen widthsijaan heightja aseta widthvälittömään lapsielementtiin. Voit vapaasti kirjoittaa oman mukautetun Sassin, käyttää upotettuja tyylejä tai käyttää leveysapuohjelmiamme .

<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>

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

<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>

Haitari esimerkki

Korttikomponentin avulla voit laajentaa oletusarvoista tiivistystoimintoa luodaksesi haitari. Haitarityylin saavuttamiseksi oikein, muista käyttää .accordionkääreenä.

<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>

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 automaattisesti tämän määritteen 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 ARIA Authoring Practices Guide -oppaassa harmonikkakuviossa – sinun on sisällytettävä ne itse mukautettuun JavaScriptiin.

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="".

menetelmät

.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.

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