Source

Col·lapse

Commuteu la visibilitat del contingut del vostre projecte amb algunes classes i els nostres connectors de JavaScript.

Com funciona

El connector de JavaScript de col·lapse s'utilitza per mostrar i ocultar contingut. Els botons o ancoratges s'utilitzen com a activadors que s'assignen a elements específics que activeu. Si col·laps un element, l'animarà heightdes del seu valor actual fins a 0. Tenint en compte com CSS gestiona les animacions, no es pot utilitzar paddingen un .collapseelement. En comptes d'això, utilitzeu la classe com a element d'embolcall independent.

Exemple

Feu clic als botons següents per mostrar i amagar un altre element mitjançant els canvis de classe:

  • .collapseamaga contingut
  • .collapsings'aplica durant les transicions
  • .collapse.showmostra contingut

Podeu utilitzar un enllaç amb l' hrefatribut o un botó amb l' data-targetatribut. En ambdós casos, data-toggle="collapse"és necessari.

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>

Múltiples objectius

A <button>o <a>pot mostrar i ocultar diversos elements fent-los referència amb un selector JQuery al seu atribut hrefo . data-targetMúltiples <button>o <a>poden mostrar i amagar un element si cadascun hi fa referència amb el seu atribut hrefodata-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>

Exemple d'acordió

Amb el component de la targeta , podeu ampliar el comportament de col·lapse predeterminat per crear un acordió.

Anim pariatur clixé reprehenderit, enim eiusmod high life accusamus Terry Richardson i calamar. 3 wolf moon officia aute, no cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua posar-hi un ocell calamar cafè d'origen únic nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur carnisser vice lomo. Leggings occaecat cervesa artesanal de la granja a la taula, sintetitzador d'estètica denim cru, probablement no n'hagueu sentit a parlar acusamus labore sostenible 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>

Accessibilitat

Assegureu-vos d'afegir aria-expandeda l'element de control. Aquest atribut transmet explícitament l'estat actual de l'element plegable vinculat al control als lectors de pantalla i tecnologies d'assistència similars. Si l'element plegable es tanca per defecte, l'atribut de l'element de control hauria de tenir un valor de aria-expanded="false". Si heu configurat l'element plegable perquè estigui obert de manera predeterminada mitjançant la showclasse, configureu aria-expanded="true"-lo al control. El connector activarà automàticament aquest atribut al control en funció de si l'element plegable s'ha obert o tancat (mitjançant JavaScript, o perquè l'usuari ha activat un altre element de control també lligat al mateix element plegable). Si l'element HTML de l'element de control no és un botó (per exemple, un <a>o <div>), l'atributrole="button"s'ha d'afegir a l'element.

Si el vostre element de control està orientat a un únic element plegable, és a dir, l' data-targetatribut apunta a un idselector, hauríeu d'afegir l' aria-controlsatribut a l'element de control, que conté l' idelement de l'element plegable. Els lectors de pantalla moderns i tecnologies d'assistència similars fan ús d'aquest atribut per oferir als usuaris dreceres addicionals per navegar directament a l'element plegable.

Tingueu en compte que la implementació actual de Bootstrap no cobreix les diferents interaccions del teclat descrites al patró d'acordió WAI-ARIA Authoring Practices 1.1 ; haureu d'incloure-les vosaltres mateixos amb JavaScript personalitzat.

Ús

El connector de col·lapse utilitza unes quantes classes per gestionar el treball pesat:

  • .collapseamaga el contingut
  • .collapse.showmostra el contingut
  • .collapsings'afegeix quan comença la transició i s'elimina quan s'acaba

Aquestes classes es poden trobar a _transitions.scss.

Mitjançant atributs de dades

Només cal afegir data-toggle="collapse"i a data-targeta l'element per assignar automàticament el control d'un o més elements plegables. L' data-targetatribut accepta un selector CSS al qual aplicar el col·lapse. Assegureu-vos d'afegir la classe collapsea l'element plegable. Si voleu que s'obri per defecte, afegiu la classe addicional show.

Per afegir una gestió de grups semblant a un acordió a una àrea plegable, afegiu l'atribut de dades data-parent="#selector". Consulteu la demostració per veure-ho en acció.

Mitjançant JavaScript

Habilita manualment amb:

$('.collapse').collapse()

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-, com a data-parent="".

Nom Tipus Per defecte Descripció
pare selector | Objecte jQuery | Element DOM fals Si es proporciona un element principal, es tancaran tots els elements plegables sota el pare especificat quan es mostri aquest element plegable. (semblant al comportament d'acordió tradicional - això depèn de la cardclasse). L'atribut s'ha d'establir a l'àrea plegable objectiu.
alternar booleà veritat Activa o desactiva l'element plegable en invocació

Mètodes

Mètodes asíncrons i transicions

Tots els mètodes de l'API són asíncrons i comencen una transició . Tornen a la persona que truca tan bon punt s'inicia la transició però abans que acabi . A més, s'ignorarà una trucada de mètode en un component en transició .

Consulteu la nostra documentació de JavaScript per obtenir més informació.

.collapse(options)

Activa el teu contingut com a element plegable. Accepta opcions opcionals object.

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

.collapse('toggle')

Commuta un element plegable per mostrar-lo o amagar-lo. Torna a la persona que truca abans que l'element plegable s'hagi mostrat o amagat (és a dir, abans que es produeixi l'esdeveniment shown.bs.collapseo ).hidden.bs.collapse

.collapse('show')

Mostra un element plegable. Torna a la persona que truca abans que s'hagi mostrat realment l'element plegable (és a dir, abans shown.bs.collapseque es produeixi l'esdeveniment).

.collapse('hide')

Amaga un element plegable. Torna a la persona que truca abans que l'element plegable s'hagi amagat (és a dir, abans hidden.bs.collapseque es produeixi l'esdeveniment).

.collapse('dispose')

Destrueix el col·lapse d'un element.

Esdeveniments

La classe de col·lapse de Bootstrap exposa alguns esdeveniments per connectar-se a la funcionalitat de col·lapse.

Tipus d'esdeveniment Descripció
show.bs.collapse Aquest esdeveniment s'activa immediatament quan showes crida al mètode d'instància.
mostrat.bs.collapse Aquest esdeveniment s'activa quan un element de col·lapse s'ha fet visible per a l'usuari (esperarà que finalitzin les transicions CSS).
ocultar.bs.collapse Aquest esdeveniment s'activa immediatament quan hides'ha cridat el mètode.
hidden.bs.collapse Aquest esdeveniment s'activa quan un element de col·lapse s'ha amagat per a l'usuari (esperarà que finalitzin les transicions CSS). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})