Source

Inval

Wissel die sigbaarheid van inhoud oor jou projek heen met 'n paar klasse en ons JavaScript-inproppe.

Hoe dit werk

Die JavaScript-inpropinvou word gebruik om inhoud te wys en te versteek. Knoppies of ankers word gebruik as snellers wat gekarteer word na spesifieke elemente wat jy wissel. Deur 'n element in te vou sal die heightvan sy huidige waarde na animeer 0. Gegewe hoe CSS animasies hanteer, kan jy nie paddingop 'n .collapseelement gebruik nie. Gebruik eerder die klas as 'n onafhanklike wikkelelement.

Voorbeeld

Klik op die knoppies hieronder om 'n ander element te wys en te versteek via klasveranderinge:

  • .collapseverberg inhoud
  • .collapsingword tydens oorgange toegepas
  • .collapse.showinhoud toon

Jy kan 'n skakel met die hrefkenmerk gebruik, of 'n knoppie met die data-targetkenmerk. In beide gevalle word die data-toggle="collapse"vereis.

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>

Veelvuldige teikens

A <button>of <a>kan veelvuldige elemente wys en versteek deur hulle te verwys met 'n JQuery-kieser in sy hrefof data-targetkenmerk. Veelvuldige <button>of <a>kan 'n element wys en versteek as hulle elkeen daarna verwys met hul hrefof data-targetkenmerk

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>

Trekklavier voorbeeld

Deur die kaartkomponent te gebruik, kan jy die verstek invougedrag uitbrei om 'n trekklavier te skep.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad inkvis. 3 wolf maan officia Aute, nie cupidatat skaatsplank dolor brunch. Kos vragmotor quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua sit 'n voël daarop inkvis enkel-oorsprong koffie 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 handwerk bier plaas-tot-tafel, rou denim estetiese sinth nesciunt jy het waarskynlik nog nie gehoor van hulle accusamus labore volhoubare 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>

Toeganklikheid

Maak seker dat jy aria-expandedby die kontrole-element voeg. Hierdie eienskap dra eksplisiet die huidige toestand van die opvoubare element wat aan die beheer gekoppel is, oor aan skermlesers en soortgelyke ondersteunende tegnologieë. As die opvoubare element by verstek gesluit is, moet die kenmerk op die beheerelement 'n waarde van hê aria-expanded="false". As jy die opvoubare element gestel het om by verstek oop te wees deur die showklas te gebruik, stel aria-expanded="true"eerder op die kontrole. Die inprop sal hierdie kenmerk outomaties op die kontrole skakel, gebaseer op of die opvoubare element oop of toegemaak is (via JavaScript, of omdat die gebruiker 'n ander beheerelement geaktiveer het wat ook aan dieselfde invoubare element gekoppel is). As die beheerelement se HTML-element nie 'n knoppie is nie (bv. 'n <a>of <div>), die kenmerkrole="button"moet by die element gevoeg word.

As jou kontrole-element 'n enkele opvoubare element teiken – maw die data-targetkenmerk wys na 'n idkieser – moet jy die aria-controlskenmerk by die beheerelement voeg, wat die idvan die opvoubare element bevat. Moderne skermlesers en soortgelyke ondersteunende tegnologieë maak gebruik van hierdie kenmerk om gebruikers van bykomende kortpaaie te voorsien om direk na die opvoubare element self te navigeer.

Let daarop dat Bootstrap se huidige implementering nie die verskillende sleutelbordinteraksies dek wat in die WAI-ARIA Authoring Practices 1.1 trekklavierpatroon beskryf word nie - jy sal dit self moet insluit met persoonlike JavaScript.

Gebruik

Die ineenstorting-inprop gebruik 'n paar klasse om die swaar opheffing te hanteer:

  • .collapseverberg die inhoud
  • .collapse.showwys die inhoud
  • .collapsingword bygevoeg wanneer die oorgang begin, en verwyder wanneer dit klaar is

Hierdie klasse kan gevind word in _transitions.scss.

Via data-eienskappe

Voeg net data-toggle="collapse"en a data-targetby die element om outomaties beheer van een of meer opvoubare elemente toe te ken. Die data-targetkenmerk aanvaar 'n CSS-kieser om die ineenstorting op toe te pas. Maak seker dat jy die klas collapseby die opvoubare element voeg. As jy wil hê dit moet verstek oopmaak, voeg die bykomende klas by show.

Om trekklavieragtige groepbestuur by 'n opvoubare area te voeg, voeg die data-kenmerk by data-parent="#selector". Verwys na die demo om dit in aksie te sien.

Via JavaScript

Aktiveer handmatig met:

$('.collapse').collapse()

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-parent="".

Naam Tik Verstek Beskrywing
ouer kieser | jQuery voorwerp | DOM element onwaar As ouer verskaf word, sal alle opvoubare elemente onder die gespesifiseerde ouer gesluit word wanneer hierdie opvoubare item gewys word. (soortgelyk aan tradisionele trekklaviergedrag - dit hang af van die cardklas). Die kenmerk moet op die teiken opvoubare area gestel word.
wissel boolean waar Wissel die opvoubare element by aanroep

Metodes

Asinchroniese metodes en oorgange

Alle API-metodes is asynchronies en begin 'n oorgang . Hulle keer terug na die oproeper sodra die oorgang begin is, maar voordat dit eindig . Daarbenewens sal 'n metode-oproep op 'n oorgangskomponent geïgnoreer word .

Sien ons JavaScript-dokumentasie vir meer inligting.

.collapse(options)

Aktiveer jou inhoud as 'n opvoubare element. Aanvaar 'n opsionele opsie object.

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

.collapse('toggle')

Wissel 'n opvoubare element na gewys of versteek. Keer terug na die oproeper voordat die opvoubare element werklik gewys of versteek is (dws voordat die shown.bs.collapseof hidden.bs.collapsegebeurtenis plaasvind).

.collapse('show')

Toon 'n opvoubare element. Keer terug na die oproeper voordat die opvoubare element werklik gewys is (dws voor die shown.bs.collapsegebeurtenis plaasvind).

.collapse('hide')

Versteek 'n opvoubare element. Keer terug na die oproeper voordat die opvoubare element werklik versteek is (dws voor die hidden.bs.collapsegebeurtenis plaasvind).

.collapse('dispose')

Vernietig 'n element se ineenstorting.

Gebeurtenisse

Bootstrap se ineenstortingsklas ontbloot 'n paar gebeurtenisse vir inskakeling by ineenstortingsfunksionaliteit.

Soort gebeurtenis Beskrywing
show.bs.ineenstorting Hierdie gebeurtenis begin onmiddellik wanneer die showinstansiemetode geroep word.
gewys.bs.ineenstorting Hierdie gebeurtenis word afgevuur wanneer 'n invou-element vir die gebruiker sigbaar gemaak is (sal wag vir CSS-oorgange om te voltooi).
versteek.bs.ineenstort Hierdie gebeurtenis word onmiddellik afgevuur wanneer die hidemetode geroep is.
verborge.bs.ineenstorting Hierdie gebeurtenis word afgevuur wanneer 'n invou-element vir die gebruiker versteek is (sal wag vir CSS-oorgange om te voltooi). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})