Source

Ynsakje

Skeakelje de sichtberens fan ynhâld yn jo projekt mei in pear klassen en ús JavaScript-plugins.

Hoe't it wurket

It ynstoarten JavaScript-plugin wurdt brûkt om ynhâld te sjen en te ferbergjen. Knoppen of ankers wurde brûkt as triggers dy't yn kaart brocht wurde oan spesifike eleminten dy't jo wikselje. It ynklappen fan in elemint sil de animearje heightfan de hjoeddeistige wearde nei 0. Sjoen hoe't CSS animaasjes omgiet, kinne jo net brûke paddingop in .collapseelemint. Brûk ynstee de klasse as in ûnôfhinklik wrappingselemint.

Foarbyld

Klikje op de knoppen hjirûnder om in oar elemint te sjen en te ferbergjen fia klassewizigingen:

  • .collapseferberget ynhâld
  • .collapsingwurdt tapast by oergongen
  • .collapse.showtoant ynhâld

Jo kinne in keppeling brûke mei it hrefattribút, of in knop mei it data-targetattribút. Yn beide gefallen data-toggle="collapse"is it nedich.

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>

Meardere doelen

A <button>of <a>kin meardere eleminten sjen litte en ferbergje troch se te ferwizen mei in JQuery-selektor yn har hrefof data-targetattribút. Meardere <button>of <a>kin in elemint sjen en ferbergje as se elk ferwize mei har hrefof data-targetattribút

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>

Foarbyld fan Akkordeon

Mei help fan de kaart komponint, kinne jo útwreidzje de standert ynstoarting gedrach foar in meitsje in akkordeon.

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 sette in fûgel op it inktvis single-origin kofje 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 ambachtlike bier pleats-tot-tafel, rau denim estetyske synth nesciunt jo nei alle gedachten hawwe net heard fan harren accusamus labore duorsume 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>

Tagonklikheid

Wês wis dat jo tafoegje aria-expandedoan it kontrôle elemint. Dit attribút bringt eksplisyt de hjoeddeistige tastân oer fan it ynklapbere elemint bûn oan 'e kontrôle oan skermlêzers en ferlykbere assistintetechnologyen. As it ynklapbere elemint standert sletten is, moat it attribút op it kontrôleelemint in wearde hawwe fan aria-expanded="false". As jo ​​​​it ynklapbere elemint ynsteld hawwe om standert iepen te wêzen mei de showklasse, set aria-expanded="true"dan op 'e kontrôle ynstee. De plugin sil dit attribút automatysk wikselje op 'e kontrôle basearre op it al of net it ynklapbere elemint is iepene of sluten (fia JavaScript, of om't de brûker in oar kontrôleelemint oanluts dat ek ferbûn is oan itselde ynklapbere elemint). As it HTML-elemint fan it kontrôleelemint gjin knop is (bygelyks in <a>of <div>), it attribútrole="button"moatte wurde tafoege oan it elemint.

As jo ​​kontrôle elemint is rjochte op in inkele ynklapbere elemint - dat wol sizze it data-targetattribút wiist nei in idselector - Jo moatte tafoegje it aria-controlsattribút oan it kontrôle elemint, mei dêryn de idfan it ynklapbere elemint. Moderne skermlêzers en ferlykbere assistinte technologyen meitsje gebrûk fan dit attribút om brûkers ekstra fluchtoetsen te jaan om direkt nei it ynklapbere elemint sels te navigearjen.

Tink derom dat de hjoeddeistige ymplemintaasje fan Bootstrap de ferskate toetseboerdynteraksjes net dekt beskreaun yn it WAI-ARIA Authoring Practices 1.1 akkordeonpatroan - jo moatte dizze sels opnimme mei oanpaste JavaScript.

Gebrûk

It ynstoartplugin brûkt in pear klassen om it swiere opheffing te behanneljen:

  • .collapseferberget de ynhâld
  • .collapse.showtoant de ynhâld
  • .collapsingwurdt tafoege as de oergong begjint, en fuortsmiten as it klear is

Dizze klassen kinne fûn wurde yn _transitions.scss.

Fia data attributen

Foegje gewoan data-toggle="collapse"en in data-targetoan it elemint ta om automatysk kontrôle fan ien of mear ynklapbere eleminten ta te jaan. It data-targetattribút akseptearret in CSS-selektor om de ynstoarting oan te passen. Wês wis dat jo de klasse tafoegje collapseoan it ynklapbere elemint. As jo ​​​​wolle dat it standert iepen is, foegje dan de ekstra klasse ta show.

Om akkordeon-like groepbehear ta te foegjen oan in ynklapber gebiet, foegje it data-attribút ta data-parent="#selector". Ferwize nei de demo om dit yn aksje te sjen.

Fia JavaScript

Ynskeakelje manuell mei:

$('.collapse').collapse()

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-, lykas yn data-parent="".

Namme Type Standert Beskriuwing
âlder kiezer | jQuery objekt | DOM elemint falsk As âlder wurdt levere, dan sille alle ynklapbere eleminten ûnder de opjûne âlder wurde sletten as dit ynklapbere item wurdt werjûn. (fergelykber mei tradisjoneel akkordeongedrach - dit is ôfhinklik fan 'e cardklasse). It attribút moat ynsteld wurde op it ynklapbere doelgebiet.
wikselje boolean wier Skeakelt it ynklapbere elemint by oprop

Metoaden

Asynchrone metoaden en transysjes

Alle API-metoaden binne asynchrone en begjinne in oergong . Se komme werom nei de beller sa gau as de oergong is begon, mar foardat it einiget . Derneist sil in metoadeoprop op in oergongskomponint wurde negearre .

Sjoch ús JavaScript-dokumintaasje foar mear ynformaasje.

.collapse(options)

Aktivearret jo ynhâld as in ynklapber elemint. Akseptearret in opsjonele opsjes object.

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

.collapse('toggle')

Skeakelt in ynklapber elemint nei werjûn of ferburgen. Keart werom nei de beller foardat it ynklapbere elemint feitlik werjûn of ferburgen is (dus foardat it barren shown.bs.collapseof hidden.bs.collapsebart).

.collapse('show')

Toant in ynklapber elemint. Keart werom nei de beller foardat it ynklapbere elemint feitlik werjûn is (dus foardat it shown.bs.collapseevenemint bart).

.collapse('hide')

Ferberget in ynklapber elemint. Keart werom nei de beller foardat it ynklapbere elemint eins ferburgen is (dus foardat it hidden.bs.collapsebarren bart).

.collapse('dispose')

Ferneatiget it ynstoarten fan in elemint.

Eveneminten

De ynstoartingsklasse fan Bootstrap bleatstelt in pear eveneminten foar heakjen oan ynstoartingsfunksjonaliteit.

Event Type Beskriuwing
show.bs.collapse Dit evenemint fjoer fuortendaliks as de showeksimplaar metoade wurdt oanroppen.
shown.bs.collapse Dit barren wurdt ûntslein as in ynstoartelemint sichtber makke is foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen).
hide.bs.collapse Dit evenemint wurdt ûntslein fuortendaliks as de hidemetoade is oanroppen.
hidden.bs.collapse Dit barren wurdt ûntslein as in ynstoartelemint is ferburgen foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})