Source

Kolapsi

Ndryshoni dukshmërinë e përmbajtjes në projektin tuaj me disa klasa dhe shtojcat tona JavaScript.

Si punon

Shtojca e kolapsit JavaScript përdoret për të shfaqur dhe fshehur përmbajtjen. Butonat ose ankorat përdoren si shkas që janë të lidhur me elementë specifikë që ndërroni. Palosja e një elementi do të animojë vlerën heightnga vlera aktuale në 0. Duke pasur parasysh se si CSS trajton animacionet, nuk mund të përdorni paddingnë një .collapseelement. Në vend të kësaj, përdorni klasën si një element mbështjellës të pavarur.

Shembull

Klikoni butonat më poshtë për të shfaqur dhe fshehur një element tjetër nëpërmjet ndryshimeve të klasës:

  • .collapsefsheh përmbajtjen
  • .collapsingzbatohet gjatë tranzicionit
  • .collapse.showtregon përmbajtjen

Mund të përdorni një lidhje me hrefatributin ose një buton me data-targetatributin. Në të dyja rastet, data-toggle="collapse"kërkohet.

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>

Objektiva të shumtë

A <button>ose <a>mund të shfaqë dhe fshehë elementë të shumtë duke i referuar me një përzgjedhës JQuery në atributin e tij hrefose . data-targetShumëfish <button>ose <a>mund të shfaqin dhe fshehin një element nëse secili e referon atë me atributin e tij hrefosedata-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>

Shembull fizarmonikë

Duke përdorur komponentin e kartës , mund të zgjeroni sjelljen e paracaktuar të kolapsit për të krijuar një fizarmonikë.

Anim pariatur klishe reprehenderit, për të eiusmod jetën e lartë akuzuar Terry richardson dhe kallamar. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Kamion ushqimor quinoa nesciunt laborum eiusmod. Mëngjes i mëngjesit 3 ujku hënë tempor, sunt aliqua vënë një zog mbi të kallamar me origjinë të vetme kafe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, birrë artizanale labore wes anderson cred nesciunt sapiente ea proident. Ad vegan përveçseur kasap vice lomo. Këllakë occaecat birrë artizanale nga ferma në tavolinë, xhins të papërpunuara estetike sintetike, ndoshta nuk keni dëgjuar për to accusamus labore të qëndrueshme 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>

Aksesueshmëria

Sigurohuni që të shtoni aria-expandednë elementin e kontrollit. Ky atribut përcjell në mënyrë eksplicite gjendjen aktuale të elementit të palosshëm të lidhur me kontrollin e lexuesve të ekranit dhe teknologjive t�� ngjashme ndihmëse. Nëse elementi i palosshëm mbyllet si parazgjedhje, atributi në elementin e kontrollit duhet të ketë një vlerë prej aria-expanded="false". Nëse keni vendosur që elementi i palosshëm të jetë i hapur si parazgjedhje duke përdorur showklasën, vendoseni aria-expanded="true"në kontrollin në vend të kësaj. Shtojca do ta ndryshojë automatikisht këtë atribut në kontroll bazuar në faktin nëse elementi i palosshëm është hapur ose mbyllur (nëpërmjet JavaScript, ose sepse përdoruesi ka aktivizuar një element tjetër kontrolli të lidhur gjithashtu me të njëjtin element të palosshëm). Nëse elementi HTML i elementit të kontrollit nuk është një buton (p.sh., një <a>ose <div>), atributirole="button"duhet t'i shtohet elementit.

Nëse elementi juaj i kontrollit synon një element të vetëm të palosshëm – dmth. data-targetatributi drejton një idpërzgjedhës – duhet të shtoni aria-controlsatributin në elementin e kontrollit, që përmban idelementin e palosshëm. Lexuesit modernë të ekranit dhe teknologjitë e ngjashme ndihmëse përdorin këtë atribut për t'u ofruar përdoruesve shkurtore shtesë për të lundruar drejtpërdrejt në vetë elementin e palosshëm.

Vini re se zbatimi aktual i Bootstrap nuk mbulon ndërveprimet e ndryshme të tastierës të përshkruara në modelin e fizarmonikës WAI-ARIA Authoring Practices 1.1 - do t'ju duhet t'i përfshini vetë këto me JavaScript të personalizuar.

Përdorimi

Shtojca e kolapsit përdor disa klasa për të trajtuar ngritjen e rëndë:

  • .collapsefsheh përmbajtjen
  • .collapse.showtregon përmbajtjen
  • .collapsingshtohet kur fillon tranzicioni dhe hiqet kur përfundon

Këto klasa mund të gjenden në _transitions.scss.

Nëpërmjet atributeve të të dhënave

Thjesht shtoni data-toggle="collapse"dhe a data-targetnë element për të caktuar automatikisht kontrollin e një ose më shumë elementeve të palosshme. Atributi data-targetpranon një përzgjedhës CSS për të aplikuar kolapsin. Sigurohuni që të shtoni klasën collapsenë elementin e palosshëm. Nëse dëshironi që të hapet si parazgjedhje, shtoni klasën shtesë show.

Për të shtuar menaxhimin e grupit të ngjashëm me fizarmonikën në një zonë të palosshme, shtoni atributin e të dhënave data-parent="#selector". Referojuni demonstrimit për ta parë këtë në veprim.

Përmes JavaScript

Aktivizo manualisht me:

$('.collapse').collapse()

Opsione

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-, si në data-parent="".

Emri Lloji E paracaktuar Përshkrim
prind përzgjedhës | Objekti jQuery | Elementi DOM i rremë Nëse ofrohet prindi, atëherë të gjithë elementët e palosshëm nën prindin e specifikuar do të mbyllen kur të shfaqet ky artikull i palosshëm. (e ngjashme me sjelljen tradicionale të fizarmonikës - kjo varet nga cardklasa). Atributi duhet të vendoset në zonën e synuar të palosshme.
ndërroj logjike e vërtetë Aktivizon elementin e palosshëm në thirrje

Metodat

Metodat dhe tranzicionet asinkrone

Të gjitha metodat API janë asinkrone dhe fillojnë një tranzicion . Ata kthehen te thirrësi sapo të fillojë tranzicioni, por para se të përfundojë . Përveç kësaj, një thirrje metodë në një komponent në tranzicion do të injorohet .

Shikoni dokumentacionin tonë JavaScript për më shumë informacion.

.collapse(options)

Aktivizon përmbajtjen tuaj si një element i palosshëm. Pranon një opsion opsional object.

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

.collapse('toggle')

Ndryshon një element të palosshëm në të shfaqur ose të fshehur. Kthehet te thirrësi përpara se elementi i palosshëm të jetë shfaqur ose fshehur (dmth. përpara se të ndodhë ngjarja shown.bs.collapseose ).hidden.bs.collapse

.collapse('show')

Tregon një element të palosshëm. Kthehet te thirrësi përpara se elementi i palosshëm të shfaqet (dmth. përpara se të shown.bs.collapsendodhë ngjarja).

.collapse('hide')

Fsheh një element të palosshëm. Kthehet te thirrësi përpara se elementi i palosshëm të jetë fshehur në të vërtetë (dmth. përpara se të hidden.bs.collapsendodhë ngjarja).

.collapse('dispose')

Shkatërron kolapsin e një elementi.

Ngjarjet

Klasa e kolapsit të Bootstrap ekspozon disa ngjarje për t'u lidhur me funksionalitetin e kolapsit.

Lloji i ngjarjes Përshkrim
shfaq.bs.kolaps Kjo ngjarje ndizet menjëherë kur showthirret metoda e shembullit.
treguar.bs.kolaps Kjo ngjarje aktivizohet kur një element kolapsi është bërë i dukshëm për përdoruesin (do të presë që kalimet CSS të përfundojnë).
fsheh.bs.kolaps Kjo ngjarje aktivizohet menjëherë kur hidemetoda është thirrur.
i fshehur.bs.kolaps Kjo ngjarje aktivizohet kur një element kolapsi është fshehur nga përdoruesi (do të presë që tranzicioni i CSS të përfundojë). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})