Thu gọn JS Bootstrap 4
Thu gọn các lớp CSS
Để biết hướng dẫn về Collapsibles, hãy đọc Hướng dẫn thu gọn Bootstrap của chúng tôi.
Class | Description | Example |
---|---|---|
.collapse | Hides the content | Try it |
.collapse show | Shows the collapsible content by default | Try it |
.collapsing | Added when the transition starts, and removed when it finishes | Try it |
Thông qua thuộc tính data-*
Chỉ cần thêm data-toggle="collapse"
và data-target
vào phần tử để tự động gán quyền kiểm soát phần tử có thể thu gọn. Thuộc tính data-target chấp nhận bộ chọn CSS để áp dụng tính năng thu gọn. Hãy nhớ thêm lớp thu gọn vào phần tử có thể thu gọn. Nếu bạn muốn nó mở mặc định, hãy thêm lớp "show" bổ sung.
Ví dụ
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
Hãy tự mình thử »Mẹo: Để thêm tính năng quản lý nhóm giống đàn accordion vào điều khiển có thể thu gọn, hãy thêm thuộc tính dữ liệu data-parent="#selector".
Thông qua JavaScript
Kích hoạt thủ công với:
$('.collapse').collapse()
Tùy chọn thu gọn
Các tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript. Đối với thuộc tính dữ liệu, hãy thêm tên tùy chọn vào data-, như trong data-parent="".
Name | Type | Default | Description | Try it |
---|---|---|---|---|
parent | selector | false | All collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior) | Try it |
toggle | boolean | true | Toggles the collapsible element on invocation | Try it |
Phương pháp thu gọn
Bảng sau liệt kê tất cả các phương pháp thu gọn có sẵn.
Method | Description | Try it |
---|---|---|
.collapse( options ) | Activates the collapsible element with an option. See options above for valid values | |
.collapse("toggle") | Toggles the collapsible element | Try it |
.collapse("show") | Shows the collapsible element | Try it |
.collapse("hide") | Hides the collapsible element | Try it |
.collapse("dispose") | Destroys the collapsible element |
Thu gọn sự kiện
Bảng sau liệt kê tất cả các sự kiện thu gọn có sẵn.
Event | Description | Try it |
---|---|---|
show.bs.collapse | Occurs when the collapsible element is about to be shown | Try it |
shown.bs.collapse | Occurs when the collapsible element is fully shown (after CSS transitions have completed) | Try it |
hide.bs.collapse | Occurs when the collapsible element is about to be hidden | Try it |
hidden.bs.collapse | Occurs when the collapsible element is fully hidden (after CSS transitions have completed) | Try it |