Source

Kolapso

Ŝaltu la videblecon de enhavo tra via projekto per kelkaj klasoj kaj niaj JavaScript-kromaĵoj.

Kiel ĝi funkcias

La kolapsa JavaScript-kromaĵo estas uzata por montri kaj kaŝi enhavon. Butonoj aŭ ankroj estas uzataj kiel ellasiloj, kiuj estas mapitaj al specifaj elementoj, kiujn vi ŝanĝas. Colapsante elementon vigligos la heightde ĝia nuna valoro al 0. Konsiderante kiel CSS pritraktas animaciojn, vi ne povas uzi paddingsur .collapseelemento. Anstataŭe, uzu la klason kiel sendependan envolvan elementon.

Ekzemplo

Alklaku la subajn butonojn por montri kaj kaŝi alian elementon per klasŝanĝoj:

  • .collapsekaŝas enhavon
  • .collapsingestas aplikata dum transiroj
  • .collapse.showmontras enhavon

Vi povas uzi ligilon kun la hrefatributo, aŭ butonon kun la data-targetatributo. En ambaŭ kazoj, la data-toggle="collapse"estas postulata.

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>

Multoblaj celoj

A <button>aŭ <a>povas montri kaj kaŝi plurajn elementojn referencante ilin per JQuery-elektilo en ĝia hrefaŭ data-targetatributo. Multoblaj <button>aŭ <a>povas montri kaj kaŝi elementon se ili ĉiu referencas ĝin per sia hrefaŭ data-targetatributo

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>

Ekzemplo de akordiono

Uzante la kartkomponenton , vi povas etendi la defaŭltan kolapsan konduton por krei akordionon.

Anim pariatur kliŝo reprehenderit, enim eiusmod alta vivo akuzas terry richardson ad kalmaro. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Manĝkamiono quinoa nesciunt laborum eiusmod. Brunch 3 lupo luno tempor, sunt aliqua metis birdon sur ĝin kalmaro unu-devena kafo 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 metia biero farm-al-table, kruda denim estetika sinteza nesciunt vi verŝajne ne aŭdis pri ili accusamus labore daŭrigebla 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>

Alirebleco

Nepre aldonu aria-expandedal la kontrolelemento. Ĉi tiu atributo eksplicite transdonas la nunan staton de la faldebla elemento ligita al la kontrolo al ekranlegantoj kaj similaj helpaj teknologioj. Se la faldebla elemento estas fermita defaŭlte, la atributo sur la kontrolelemento devus havi valoron de aria-expanded="false". Se vi agordis la faldeblan elementon por esti malfermita defaŭlte uzante la showklason, aria-expanded="true"anstataŭe agordu la kontrolon. La kromaĵo aŭtomate ŝaltos ĉi tiun atributon sur la kontrolo surbaze de ĉu aŭ ne la faldebla elemento estis malfermita aŭ fermita (per JavaScript, aŭ ĉar la uzanto ekigis alian kontrolelementon ankaŭ ligitan al la sama faldebla elemento). Se la HTML-elemento de la kontrolelemento ne estas butono (ekz., an <a>aŭ <div>), la atributorole="button"devus esti aldonita al la elemento.

Se via kontrolelemento celas ununuran faldeblan elementon - te la data-targetatributo indikas idelektilon - vi devus aldoni la aria-controlsatributon al la kontrolelemento, enhavanta la idde la faldebla elemento. Modernaj ekranlegiloj kaj similaj helpaj teknologioj uzas ĉi tiun atributon por provizi uzantojn per kromaj ŝparvojoj por navigi rekte al la faldebla elemento mem.

Notu, ke la nuna efektivigo de Bootstrap ne kovras la diversajn klavarinteragojn priskribitajn en la akordiona ŝablono de WAI-ARIA Authoring Practices 1.1 - vi devos mem inkluzivi ĉi tiujn per kutima JavaScript.

Uzado

La kolapsa kromaĵo uzas kelkajn klasojn por trakti la pezan ŝarĝon:

  • .collapsekaŝas la enhavon
  • .collapse.showmontras la enhavon
  • .collapsingestas aldonita kiam la transiro komenciĝas, kaj forigita kiam ĝi finiĝas

Ĉi tiuj klasoj troviĝas en _transitions.scss.

Per datumaj atributoj

Nur aldonu data-toggle="collapse"kaj a data-targetal la elemento por aŭtomate asigni kontrolon de unu aŭ pluraj faldeblaj elementoj. La data-targetatributo akceptas CSS-elektilon al kiu apliki la kolapson. Nepre aldonu la klason collapseal la faldebla elemento. Se vi ŝatus, ke ĝi defaŭlte malfermu, aldonu la aldonan klason show.

Por aldoni akordion-similan grupadministradon al faldebla areo, aldonu la datuman atributon data-parent="#selector". Riferu al la demo por vidi ĉi tion en ago.

Per JavaScript

Ebligu permane per:

$('.collapse').collapse()

Opcioj

Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-, kiel en data-parent="".

Nomo Tajpu Defaŭlte Priskribo
gepatro elektilo | jQuery objekto | DOM-elemento malvera Se gepatro estas provizita, tiam ĉiuj faldeblaj elementoj sub la specifita gepatro estos fermitaj kiam ĉi tiu faldebla ero montriĝas. (simila al tradicia akordiona konduto - tio dependas de la cardklaso). La atributo devas esti agordita sur la cela faldebla areo.
baskuli bulea vera Ŝaltas la faldeblan elementon ĉe alvoko

Metodoj

Nesinkronaj metodoj kaj transiroj

Ĉiuj API-metodoj estas nesinkronaj kaj komencas transiron . Ili revenas al la alvokanto tuj kiam la transiro estas komencita sed antaŭ ol ĝi finiĝas . Krome, metodovoko sur transira komponento estos ignorita .

Vidu nian JavaScript-dokumentaron por pliaj informoj.

.collapse(options)

Aktivigas vian enhavon kiel faldebla elemento. Akceptas laŭvolajn opciojn object.

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

.collapse('toggle')

Ŝaltas faldebla elemento al montrita aŭ kaŝita. Revenas al la alvokanto antaŭ ol la faldebla elemento efektive estis montrita aŭ kaŝita (t.e. antaŭ ol okazas la shown.bs.collapseaŭ hidden.bs.collapseevento).

.collapse('show')

Montras faldeblan elementon. Revenas al la alvokanto antaŭ ol la faldebla elemento efektive montriĝis (te antaŭ ol la shown.bs.collapseevento okazas).

.collapse('hide')

Kaŝas faldeblan elementon. Revenas al la alvokanto antaŭ ol la faldebla elemento efektive estis kaŝita (te antaŭ ol la hidden.bs.collapseevento okazas).

.collapse('dispose')

Detruas la kolapson de elemento.

Eventoj

La kolapsoklaso de Bootstrap elmontras kelkajn eventojn por hoki en kolapfunkciecon.

Eventa Tipo Priskribo
montri.bs.kolapso Ĉi tiu evento tuj ekfunkciigas kiam la showekzempla metodo estas vokita.
montrita.bs.kolapso Ĉi tiu okazaĵo estas pafita kiam kolapelemento fariĝis videbla por la uzanto (atendos ke CSS-transiroj finiĝos).
kaŝi.bs.kolapso Ĉi tiu evento estas lanĉita tuj kiam la hidemetodo estas vokita.
kaŝita.bs.kolapso Ĉi tiu okazaĵo estas pafita kiam kolapelemento estis kaŝita de la uzanto (atendos ke CSS-transiroj finiĝos). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})