Runtuh

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

Secara amnya, kami mengesyorkan menggunakan butang dengan data-bs-targetatribut. Walaupun tidak disyorkan dari sudut semantik, anda juga boleh menggunakan pautan dengan hrefatribut (dan a role="button"). Dalam kedua-dua kes, data-bs-toggle="collapse"ia diperlukan.

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

Mendatar

Pemalam runtuh juga menyokong runtuh mendatar. Tambahkan .collapse-horizontalkelas pengubah suai untuk mengalihkan widthbukannya heightdan tetapkan widthpada elemen anak segera. Jangan ragu untuk menulis Sass tersuai anda sendiri, gunakan gaya sebaris atau gunakan utiliti lebar kami .

<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

Pelbagai sasaran

A <button>atau <a>boleh menunjukkan dan menyembunyikan berbilang elemen dengan merujuknya dengan pemilih dalam atribut ataunya href. data-bs-targetBerbilang <button>atau <a>boleh menunjukkan dan menyembunyikan elemen jika mereka masing-masing merujuknya dengan atribut hrefatau merekadata-bs-target

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-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">
        Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </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-bs-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 pilihan yang diterangkan dalam corak akordion Panduan Amalan Pengarangan ARIA - anda perlu memasukkannya sendiri dengan JavaScript tersuai.

Sass

Pembolehubah

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

Kelas

Kelas peralihan runtuh boleh didapati scss/_transitions.scsskerana ini dikongsi merentas berbilang komponen (runtuh dan akordion).

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

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-bs-toggle="collapse"dan a data-bs-targetpada elemen untuk menetapkan kawalan secara automatik bagi satu atau lebih elemen boleh lipat. Atribut data-bs-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-bs-parent="#selector". Rujuk halaman akordion untuk maklumat lanjut.

Melalui JavaScript

Dayakan secara manual dengan:

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

Pilihan

Memandangkan pilihan boleh dihantar melalui atribut data atau JavaScript, anda boleh menambahkan nama pilihan pada data-bs-, seperti dalam data-bs-animation="{value}". Pastikan anda menukar jenis kes bagi nama pilihan daripada " camelCase " kepada " kebab-case " apabila menghantar pilihan melalui atribut data. Sebagai contoh, gunakan data-bs-custom-class="beautifier"bukannya data-bs-customClass="beautifier".

Mulai Bootstrap 5.2.0, semua komponen menyokong atribut data simpanan percubaandata-bs-config yang boleh menempatkan konfigurasi komponen ringkas sebagai rentetan JSON. Apabila elemen mempunyai data-bs-config='{"delay":0, "title":123}'dan data-bs-title="456"atribut, nilai akhir titleakan menjadi 456dan atribut data yang berasingan akan mengatasi nilai yang diberikan pada data-bs-config. Selain itu, atribut data sedia ada dapat menempatkan nilai JSON seperti data-bs-delay='{"show":0,"hide":150}'.

Kaedah

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

Anda boleh membuat contoh runtuh dengan pembina, sebagai contoh:

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

Peristiwa

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

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})