Source

Összeomlás

Néhány osztállyal és JavaScript beépülő moduljainkkal átkapcsolhatja a tartalom láthatóságát a projektben.

Hogyan működik

Az összecsukható JavaScript beépülő modul a tartalom megjelenítésére és elrejtésére szolgál. A gombok vagy horgonyok triggerekként használatosak, amelyek a váltott elemekhez vannak leképezve. Egy elem összecsukása az heightaktuális értékétől a következőre animálja 0. Tekintettel arra, hogy a CSS hogyan kezeli az animációkat, nem használható paddingelemeken .collapse. Ehelyett használja az osztályt független burkolóelemként.

Példa

Kattintson az alábbi gombokra egy másik elem megjelenítéséhez és elrejtéséhez osztálymódosításokon keresztül:

  • .collapsetartalmat rejt
  • .collapsingátmenetek során alkalmazzák
  • .collapse.showtartalmat mutat

Használhat hivatkozást az hrefattribútumhoz, vagy gombot az data-targetattribútumhoz. Mindkét esetben data-toggle="collapse"kötelező.

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>

Több célpont

A <button>vagy <a>több elemet is megjeleníthet és elrejthet, ha hivatkozik rájuk egy JQuery-választóval az hrefattribútumában data-target. Több <button>vagy <a>megjeleníthet és elrejthet egy elemet, ha mindegyik a hrefvagy data-targetattribútummal hivatkozik rá

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>

Példa harmonika

A kártyakomponens használatával kiterjesztheti az alapértelmezett összecsukási viselkedést harmonika létrehozásához.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson és tintahal. 3 wolf moon officia aute, non cupidatat gördeszka dolor villásreggeli. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it tintahal egyeredetű kávé nulla guessnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegán kivételes hentes vice lomo. Leggings occaecat kézműves sör farmtól asztalig, nyers farmer esztétikus szintetizátor, valószínűleg még nem hallott róluk accusamus labore fenntartható 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>

Megközelíthetőség

Feltétlenül adja hozzá aria-expandeda vezérlőelemet. Ez az attribútum kifejezetten közvetíti a vezérlőhöz kapcsolódó összecsukható elem aktuális állapotát a képernyőolvasóknak és a hasonló kisegítő technológiáknak. Ha az összecsukható elem alapértelmezés szerint be van zárva, akkor a vezérlőelem attribútumának értékűnek kell lennie aria-expanded="false". Ha az összecsukható elemet alapértelmezés szerint nyitottnak állította be az showosztály használatával, aria-expanded="true"akkor inkább a vezérlőn állítsa be. A beépülő modul automatikusan átkapcsolja ezt az attribútumot a vezérlőn attól függően, hogy az összecsukható elemet megnyitották-e vagy bezárták-e (JavaScripten keresztül, vagy azért, mert a felhasználó egy másik vezérlőelemet váltott ki, amely szintén ugyanahhoz az összecsukható elemhez van kötve). Ha a vezérlőelem HTML-eleme nem gomb (pl. egy <a>vagy <div>), akkor az attribútumrole="button"hozzá kell adni az elemhez.

Ha a vezérlőelem egyetlen összecsukható elemet céloz meg – azaz az data-targetattribútum egy idszelektorra mutat –, akkor az attribútumot hozzá kell adni az összecsukható elemet aria-controlstartalmazó vezérlőelemhez . idA modern képernyőolvasók és a hasonló kisegítő technológiák ezt az attribútumot használják fel, hogy további parancsikonokat biztosítsanak a felhasználóknak, amelyekkel közvetlenül az összecsukható elemhez navigálhatnak.

Ne feledje, hogy a Bootstrap jelenlegi megvalósítása nem fedi le a WAI-ARIA Authoring Practices 1.1 harmonikamintában leírt különféle billentyűzet-interakciókat – ezeket Önnek kell beépítenie az egyéni JavaScriptbe.

Használat

A collapse plugin néhány osztályt használ a nehéz emelés kezelésére:

  • .collapseelrejti a tartalmat
  • .collapse.showmutatja a tartalmat
  • .collapsinghozzáadódik az átmenet megkezdésekor, és eltávolítja, amikor befejeződik

Ezek az osztályok itt találhatók _transitions.scss.

Adatattribútumokon keresztül

Csak adja hozzá az elemet data-toggle="collapse"és egy data-targetelemet, hogy automatikusan hozzárendelje egy vagy több összecsukható elem vezérlését. Az data-targetattribútum elfogad egy CSS-választót az összecsukás alkalmazásához. Feltétlenül adja hozzá az osztályt collapseaz összecsukható elemhez. Ha azt szeretné, hogy alapértelmezetten megnyíljon, adja hozzá a további osztályt show.

Ha harmonikaszerű csoportkezelést szeretne hozzáadni egy összecsukható területhez, adja hozzá a data attribútumot data-parent="#selector". Tekintse meg a bemutatót, hogy megtekinthesse ezt működés közben.

JavaScripten keresztül

Manuális engedélyezés a következőkkel:

$('.collapse').collapse()

Lehetőségek

Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-következőhöz: data-parent="".

Név típus Alapértelmezett Leírás
szülő választó | jQuery objektum | DOM elem hamis Ha szülő van megadva, akkor a megadott szülő alatti összes összecsukható elem bezárul, amikor ez az összecsukható elem megjelenik. (hasonlóan a hagyományos harmonika viselkedéshez - ez cardosztályfüggő). Az attribútumot a célösszecsukható területen kell beállítani.
kapcsolót logikai érték igaz Bekapcsolja az összecsukható elemet híváskor

Mód

Aszinkron módszerek és átmenetek

Minden API metódus aszinkron , és átmenetet indít . Amint az átmenet elkezdődik, de még azelőtt visszatérnek a hívóhoz . Ezenkívül a rendszer figyelmen kívül hagyja az átmeneti komponens metódushívásait .

További információért tekintse meg JavaScript dokumentációnkat.

.collapse(options)

A tartalmat összecsukható elemként aktiválja. Elfogad egy opcionális opciót object.

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

.collapse('toggle')

Az összecsukható elemet megjelenített vagy rejtett állapotba kapcsolja. Visszatér a hívóhoz, mielőtt az összecsukható elem ténylegesen megjelenne vagy elrejtődne (azaz mielőtt a shown.bs.collapsevagy hidden.bs.collapseesemény bekövetkezne).

.collapse('show')

Összecsukható elemet jelenít meg. Visszatér a hívóhoz, mielőtt az összecsukható elem ténylegesen megjelenne (azaz az shown.bs.collapseesemény bekövetkezte előtt).

.collapse('hide')

Elrejti az összecsukható elemet. Visszatér a hívóhoz, mielőtt az összecsukható elem ténylegesen el lett volna rejtve (azaz az hidden.bs.collapseesemény bekövetkezte előtt).

.collapse('dispose')

Elpusztítja egy elem összeomlását.

Események

A Bootstrap összecsukási osztálya felfed néhány eseményt az összecsukási funkcióhoz való kapcsolódáshoz.

Esemény típus Leírás
show.bs.collapse Ez az esemény azonnal aktiválódik a showpéldánymetódus meghívásakor.
látható.bs.összeomlás Ez az esemény akkor aktiválódik, amikor egy összecsukott elem láthatóvá lett a felhasználó számára (megvárja a CSS-átmenetek befejezését).
hide.bs.collapse Ez az esemény azonnal aktiválódik, amikor a hidemetódus meghívásra került.
rejtett.bs.összeomlás Ez az esemény akkor aktiválódik, amikor egy összecsukott elemet elrejtettek a felhasználó elől (megvárja a CSS-átmenetek befejezését). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})