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 height
daripada nilai semasanya kepada 0
. Memandangkan cara CSS mengendalikan animasi, anda tidak boleh menggunakan padding
elemen .collapse
. Sebaliknya, gunakan kelas sebagai elemen pembalut bebas.
prefers-reduced-motion
pertanyaan media. Lihat bahagian
gerakan yang dikurangkan dalam dokumentasi kebolehaksesan kami .
Contoh
Klik butang di bawah untuk menunjukkan dan menyembunyikan elemen lain melalui perubahan kelas:
.collapse
menyembunyikan kandungan.collapsing
digunakan semasa peralihan.collapse.show
menunjukkan kandungan
Secara amnya, kami mengesyorkan menggunakan butang dengan data-bs-target
atribut. Walaupun tidak disyorkan dari sudut semantik, anda juga boleh menggunakan pautan dengan href
atribut (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-horizontal
kelas pengubah suai untuk mengalihkan width
bukannya height
dan tetapkan width
pada elemen anak segera. Jangan ragu untuk menulis Sass tersuai anda sendiri, gunakan gaya sebaris atau gunakan utiliti lebar kami .
min-height
set untuk mengelakkan pengecatan semula yang berlebihan dalam dokumen kami, ini tidak diperlukan secara eksplisit.
Hanya width
elemen pada anak diperlukan.
<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-target
Berbilang <button>
atau <a>
boleh menunjukkan dan menyembunyikan elemen jika mereka masing-masing merujuknya dengan atribut href
atau 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-expanded
pada 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 dibuka secara lalai menggunakan show
kelas, 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-target
atribut menunjuk kepada id
pemilih – anda harus menambah aria-controls
atribut pada elemen kawalan, yang mengandungi id
elemen 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 Amalan Pengarangan WAI-ARIA 1.1 - 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.scss
kerana 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:
.collapse
menyembunyikan kandungan.collapse.show
menunjukkan kandungan.collapsing
ditambah 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-target
pada elemen untuk memberikan kawalan secara automatik bagi satu atau lebih elemen boleh lipat. Atribut data-bs-target
menerima pemilih CSS untuk menggunakan keruntuhan. Pastikan anda menambah kelas collapse
pada 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:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Pilihan
Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-bs-
, seperti dalam data-bs-parent=""
.
Nama | taip | Lalai | Penerangan |
---|---|---|---|
parent |
pemilih | objek jQuery | elemen DOM | false |
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 card kelas). Atribut perlu ditetapkan pada kawasan boleh lipat sasaran. |
toggle |
boolean | true |
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 .
Mengaktifkan kandungan anda sebagai elemen boleh lipat. Menerima pilihan pilihan object
.
Anda boleh membuat contoh runtuh dengan pembina, sebagai contoh:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Kaedah | Penerangan |
---|---|
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.collapse atau hidden.bs.collapse peristiwa berlaku). |
show |
Menunjukkan elemen boleh lipat. Kembali kepada pemanggil sebelum elemen boleh lipat sebenarnya ditunjukkan (cth, sebelum shown.bs.collapse peristiwa berlaku). |
hide |
Menyembunyikan elemen yang boleh dilipat. Kembali kepada pemanggil sebelum elemen boleh lipat sebenarnya telah disembunyikan (cth, sebelum hidden.bs.collapse peristiwa berlaku). |
dispose |
Memusnahkan keruntuhan unsur. (Mengalih keluar data yang disimpan pada elemen DOM) |
getInstance |
Kaedah statik yang membolehkan anda mendapatkan contoh runtuh yang dikaitkan dengan elemen DOM, anda boleh menggunakannya seperti ini:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
Kaedah statik yang mengembalikan tika runtuh yang dikaitkan dengan elemen DOM atau mencipta yang baharu sekiranya ia tidak dimulakan. Anda boleh menggunakannya seperti ini:bootstrap.Collapse.getOrCreateInstance(element) |
Peristiwa
Kelas runtuh Bootstrap mendedahkan beberapa peristiwa untuk menyambung ke fungsi runtuh.
Jenis acara | Penerangan |
---|---|
show.bs.collapse |
Peristiwa ini berlaku serta-merta apabila show kaedah contoh dipanggil. |
shown.bs.collapse |
Peristiwa ini dicetuskan apabila elemen runtuh telah dilihat kepada pengguna (akan menunggu peralihan CSS selesai). |
hide.bs.collapse |
Acara ini dipecat serta-merta apabila hide kaedah telah dipanggil. |
hidden.bs.collapse |
Peristiwa ini dicetuskan apabila elemen runtuh telah disembunyikan daripada pengguna (akan menunggu peralihan CSS selesai). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})