Source

ambruk

Ganti visibilitas konten ing proyek sampeyan kanthi sawetara kelas lan plugin JavaScript.

Cara kerjane

Plugin JavaScript ambruk digunakake kanggo nuduhake lan ndhelikake konten. Tombol utawa jangkar digunakake minangka pemicu sing dipetakan menyang unsur tartamtu sing sampeyan ganti. Nglumpukake unsur bakal ngowahi heightsaka nilai saiki dadi 0. Given carane CSS nangani animasi, sampeyan ora bisa nggunakake paddinging .collapseunsur. Nanging, nggunakake kelas minangka unsur bungkus sawijining.

Tuladha

Klik tombol ing ngisor iki kanggo nuduhake lan ndhelikake unsur liyane liwat owah-owahan kelas:

  • .collapsendhelikake isi
  • .collapsingditrapake sajrone transisi
  • .collapse.shownuduhake isi

Sampeyan bisa nggunakake link karo hrefatribut, utawa tombol karo data-targetatribut. Ing kasus loro, data-toggle="collapse"iku dibutuhake.

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>

Multiple target

A <button>utawa <a>bisa nuduhake lan ndhelikake sawetara unsur kanthi ngrujuk karo pamilih JQuery ing atribut hrefutawa . data-targetMultiple <button>utawa <a>bisa nuduhake lan ndhelikake unsur yen saben referensi karo atribut hrefutawadata-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>

Tuladha akordion

Nggunakake komponen kertu , sampeyan bisa ngluwihi prilaku ambruk standar kanggo nggawe akordion.

Anim pariatur cliche reprehenderit, enim eiusmod dhuwur urip accusamus terry richardson ad cumi. 3 wolf rembulan officia aute, non cupidatat skateboard dolor brunch. Truk pangan quinoa nesciunt laborum eiusmod. Brunch 3 wolf rembulan temporer, sunt aliqua sijine manuk ing iku cumi siji-asal kopi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Iklan vegan kajaba tukang daging vice lomo. Legging occaecat kerajinan bir farm-to-table, denim mentahan estetika synth nesciunt sampeyan mbokmenawa durung krungu saka wong 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.
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>

Aksesibilitas

Dadi manawa kanggo nambah aria-expandedmenyang unsur kontrol. Atribut iki kanthi jelas nuduhake kahanan saiki saka unsur sing bisa digulung sing disambungake menyang kontrol kanggo maca layar lan teknologi pitulung sing padha. Yen unsur collapsible ditutup kanthi standar, atribut ing unsur kontrol kudu duwe nilai aria-expanded="false". Yen sampeyan wis nyetel unsur collapsible mbukak minangka standar nggunakake showkelas, nyetel aria-expanded="true"ing kontrol tinimbang. Plugin bakal kanthi otomatis ngalih atribut iki ing kontrol adhedhasar apa unsur collapsible wis dibukak utawa ditutup (liwat JavaScript, utawa amarga pangguna micu unsur kontrol liyane uga disambungake menyang unsur collapsbile padha). Yen unsur HTML unsur kontrol dudu tombol (contone, <a>utawa <div>), atribut kasebutrole="button"kudu ditambahake menyang unsur.

Yen unsur kontrol sampeyan nargetake unsur sing bisa dilipat - yaiku data-targetatribut kasebut ngarah menyang idpamilih - sampeyan kudu nambah aria-controlsatribut menyang unsur kontrol, ngemot idunsur sing bisa dilipat. Pembaca layar modern lan teknologi bantu sing padha nggunakake atribut iki kanggo nyedhiyakake trabasan tambahan kanggo pangguna kanggo navigasi langsung menyang unsur sing bisa dilipat.

Elinga yen implementasine Bootstrap saiki ora nyakup macem-macem interaksi keyboard sing diterangake ing pola akordion WAI-ARIA Authoring Practices 1.1 - sampeyan kudu nyakup iki dhewe karo JavaScript khusus.

Panggunaan

Plugin ambruk nggunakake sawetara kelas kanggo nangani ngangkat abot:

  • .collapsendhelikake isi
  • .collapse.shownuduhake isi
  • .collapsingditambahake nalika transisi diwiwiti, lan dibusak nalika rampung

Kelas kasebut bisa ditemokake ing _transitions.scss.

Liwat atribut data

Mung nambah data-toggle="collapse"lan data-targetmenyang unsur kanggo otomatis nemtokake kontrol siji utawa luwih unsur collapsible. Atribut data-targetnampa pamilih CSS kanggo aplikasi ambruk kanggo. Dadi manawa kanggo nambah kelas collapsemenyang unsur collapsible. Yen sampeyan pengin mbukak standar, tambahake kelas tambahan show.

Kanggo nambah manajemen grup kaya akordion menyang area sing bisa dilipat, tambahake atribut data data-parent="#selector". Deleng demo kanggo ndeleng iki ing tumindak.

Liwat JavaScript

Aktifake kanthi manual kanthi:

$('.collapse').collapse()

Pilihan

Opsi bisa dilewati liwat atribut data utawa JavaScript. Kanggo atribut data, tambahake jeneng pilihan menyang data-, kaya ing data-parent="".

jeneng Jinis Default Katrangan
wong tuwa pamilih | obyek jQuery | unsur DOM palsu Yen wong tuwa diwenehake, kabeh unsur sing bisa dilipat ing sangisore wong tuwa sing ditemtokake bakal ditutup nalika item sing bisa dilipat iki ditampilake. (padha karo prilaku akordion tradisional - iki gumantung ing cardkelas). Atribut kudu disetel ing target area sing bisa dilipat.
ngalih boolean bener Ngowahi unsur sing bisa dilipat ing panyuwunan

Metode

Cara lan transisi asinkron

Kabeh cara API ora sinkron lan miwiti transisi . Dheweke bali menyang panelpon sanalika transisi diwiwiti nanging sadurunge rampung . Kajaba iku, panggilan metode ing komponen transisi bakal diabaikan .

Deleng dokumentasi JavaScript kanggo informasi luwih lengkap.

.collapse(options)

Ngaktifake konten sampeyan minangka unsur sing bisa dilipat. Nampa opsi opsional object.

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

.collapse('toggle')

Ngalih unsur sing bisa dilipat dadi ditampilake utawa didhelikake. Bali menyang panelpon sadurunge unsur collapsible wis bener ditampilake utawa didhelikake (yaiku sadurunge shown.bs.collapseutawa hidden.bs.collapseacara dumadi).

.collapse('show')

Nuduhake unsur collapsible. Bali menyang panelpon sadurunge unsur collapsible wis bener wis ditampilake (ie sadurunge shown.bs.collapseacara kedaden).

.collapse('hide')

Ndhelikake unsur collapsible. Bali menyang panelpon sadurunge unsur collapsible wis bener didhelikake (yaiku sadurunge hidden.bs.collapseacara kedaden).

.collapse('dispose')

Ngancurake ambruk unsur.

Acara

Kelas ambruk Bootstrap nyedhiyakake sawetara acara kanggo nyambungake fungsi ambruk.

Jinis Acara Katrangan
show.bs.ambruk Acara iki langsung murub nalika showmetode conto diarani.
ditampilake.bs.ambruk Acara iki dipecat nalika unsur ambruk wis katon kanggo pangguna (bakal ngenteni transisi CSS rampung).
hide.bs.ambruk Acara iki langsung dipecat nalika hidemetode kasebut diarani.
didhelikake.bs.ambruk Acara iki dipecat nalika unsur ambruk wis didhelikake saka pangguna (bakal ngenteni transisi CSS rampung). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})