Source

Runtuh

Togol keterlihatan kandungan merentas projek anda dengan beberapa kelas dan pemalam JavaScript kami.

Bagaimana ia berfungsi

Pemalam JavaScript runtuh digunakan untuk menunjukkan dan menyembunyikan kandungan. Butang atau sauh digunakan sebagai pencetus yang dipetakan pada elemen tertentu yang anda togol. Meruntuhkan elemen akan menghidupkan heightdaripada nilai semasanya kepada 0. Memandangkan cara CSS mengendalikan animasi, anda tidak boleh menggunakan paddingelemen .collapse. Sebaliknya, gunakan kelas sebagai elemen pembalut bebas.

Contoh

Klik butang di bawah untuk menunjukkan dan menyembunyikan elemen lain melalui perubahan kelas:

  • .collapsemenyembunyikan kandungan
  • .collapsingdigunakan semasa peralihan
  • .collapse.showmenunjukkan kandungan

Anda boleh menggunakan pautan dengan hrefatribut, atau butang dengan data-targetatribut. Dalam kedua-dua kes, data-toggle="collapse"ia diperlukan.

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>

Pelbagai sasaran

A <button>atau <a>boleh menunjukkan dan menyembunyikan berbilang elemen dengan merujuknya dengan pemilih JQuery dalam hrefatau data-targetatributnya. Berbilang <button>atau <a>boleh menunjukkan dan menyembunyikan elemen jika mereka masing-masing merujuknya dengan atribut hrefatau merekadata-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>

Contoh akordion

Menggunakan komponen kad , anda boleh melanjutkan tingkah laku runtuh lalai untuk mencipta akordion.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, bukan cupidatat skateboard dolor brunch. Trak makanan quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua meletakkan seekor burung di atasnya sotong kopi asal tunggal nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Bingkap kaki occaecat craft beer farm-to-table, raw denim estetic synth synth nesciunt anda mungkin tidak pernah mendengarnya accusamus labore mampan 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>

Kebolehcapaian

Pastikan anda menambah aria-expandedpada elemen kawalan. Atribut ini secara eksplisit menyampaikan keadaan semasa elemen boleh lipat yang terikat pada kawalan kepada pembaca skrin dan teknologi bantuan yang serupa. Jika elemen boleh lipat ditutup secara lalai, atribut pada elemen kawalan harus mempunyai nilai aria-expanded="false". Jika anda telah menetapkan elemen boleh lipat untuk dibuka secara lalai menggunakan showkelas, tetapkan aria-expanded="true"pada kawalan. Pemalam akan menogol atribut ini secara automatik pada kawalan berdasarkan sama ada elemen boleh lipat telah dibuka atau ditutup (melalui JavaScript, atau kerana pengguna mencetuskan elemen kawalan lain yang turut terikat pada elemen boleh lipat yang sama). Jika elemen HTML elemen kawalan bukan butang (cth, an <a>atau <div>), atributrole="button"perlu ditambah kepada elemen.

Jika elemen kawalan anda menyasarkan satu elemen boleh lipat – iaitu data-targetatribut menunjuk kepada idpemilih – anda harus menambah aria-controlsatribut pada elemen kawalan, yang mengandungi idelemen boleh lipat. Pembaca skrin moden dan teknologi bantuan serupa menggunakan atribut ini untuk menyediakan pengguna dengan pintasan tambahan untuk menavigasi terus ke elemen boleh lipat itu sendiri.

Ambil perhatian bahawa pelaksanaan semasa Bootstrap tidak meliputi pelbagai interaksi papan kekunci yang diterangkan dalam corak akordion Amalan Pengarangan WAI-ARIA 1.1 - anda perlu memasukkannya sendiri dengan JavaScript tersuai.

Penggunaan

Pemalam runtuh menggunakan beberapa kelas untuk mengendalikan pengangkatan berat:

  • .collapsemenyembunyikan kandungan
  • .collapse.showmenunjukkan kandungan
  • .collapsingditambah apabila peralihan bermula, dan dikeluarkan apabila ia selesai

Kelas-kelas ini boleh didapati dalam _transitions.scss.

Melalui atribut data

Cuma tambah data-toggle="collapse"dan a data-targetpada elemen untuk menetapkan kawalan secara automatik bagi satu atau lebih elemen boleh lipat. Atribut data-targetmenerima pemilih CSS untuk menggunakan keruntuhan. Pastikan anda menambah kelas collapsepada elemen boleh lipat. Jika anda mahu ia dibuka secara lalai, tambahkan kelas tambahan show.

Untuk menambah pengurusan kumpulan seperti akordion pada kawasan boleh lipat, tambahkan atribut data data-parent="#selector". Rujuk demo untuk melihat tindakan ini.

Melalui JavaScript

Dayakan secara manual dengan:

$('.collapse').collapse()

Pilihan

Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-, seperti dalam data-parent="".

Nama taip Lalai Penerangan
ibu bapa pemilih | objek jQuery | elemen DOM salah Jika induk disediakan, maka semua elemen boleh lipat di bawah induk yang ditentukan akan ditutup apabila item boleh lipat ini ditunjukkan. (serupa dengan tingkah laku akordion tradisional - ini bergantung pada cardkelas). Atribut perlu ditetapkan pada kawasan boleh lipat sasaran.
togol boolean benar Menogol elemen boleh lipat pada seruan

Kaedah

Kaedah dan peralihan tak segerak

Semua kaedah API adalah tak segerak dan mulakan peralihan . Mereka kembali kepada pemanggil sebaik sahaja peralihan dimulakan tetapi sebelum ia tamat . Selain itu, panggilan kaedah pada komponen peralihan akan diabaikan .

Lihat dokumentasi JavaScript kami untuk mendapatkan maklumat lanjut.

.collapse(options)

Mengaktifkan kandungan anda sebagai elemen boleh lipat. Menerima pilihan pilihan object.

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

.collapse('toggle')

Menogol elemen boleh lipat kepada ditunjukkan atau disembunyikan. Kembali kepada pemanggil sebelum elemen boleh lipat sebenarnya telah ditunjukkan atau disembunyikan (iaitu sebelum shown.bs.collapseatau hidden.bs.collapseperistiwa berlaku).

.collapse('show')

Menunjukkan elemen boleh lipat. Kembali kepada pemanggil sebelum elemen boleh lipat sebenarnya telah ditunjukkan (iaitu sebelum shown.bs.collapseperistiwa berlaku).

.collapse('hide')

Menyembunyikan elemen yang boleh dilipat. Kembali kepada pemanggil sebelum elemen boleh lipat sebenarnya telah disembunyikan (iaitu sebelum hidden.bs.collapseperistiwa berlaku).

.collapse('dispose')

Memusnahkan keruntuhan unsur.

Peristiwa

Kelas runtuh Bootstrap mendedahkan beberapa peristiwa untuk menyambung ke fungsi runtuh.

Jenis acara Penerangan
tunjukkan.bs.runtuh Peristiwa ini menyala serta-merta apabila showkaedah contoh dipanggil.
ditunjukkan.bs.runtuh Peristiwa ini dicetuskan apabila elemen runtuh telah dilihat kepada pengguna (akan menunggu peralihan CSS selesai).
hide.bs.runtuh Acara ini dipecat serta-merta apabila hidekaedah telah dipanggil.
tersembunyi.bs.runtuh Peristiwa ini dicetuskan apabila elemen runtuh telah disembunyikan daripada pengguna (akan menunggu peralihan CSS selesai). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})