Bootstrap 4 JS Thu gọn
Thu gọn các lớp CSS
Để có hướng dẫn về Thu gọn, hãy đọc Hướng dẫn Thu gọn Bootstrap của chúng tôi .
| Class | Description | Example |
|---|---|---|
.collapse |
Hides the content | |
.collapse show |
Shows the collapsible content by default | |
.collapsing |
Added when the transition starts, and removed when it finishes |
Qua dữ liệu- * Thuộc tính
Chỉ cần thêm data-toggle="collapse"và một data-targetphần tử vào để 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 một bộ chọn CSS để áp dụng tính năng thu gọn. Đảm bảo thêm phần thu gọn lớp 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 bổ sung "show".
Thí dụ
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
Mẹo: Để thêm quản lý nhóm giống như đàn accordion vào một điều khiển có thể thu gọn, hãy thêm thuộc tính dữ liệu data-parent = "# selector".
Qua JavaScript
Bật theo cách thủ công với:
$('.collapse').collapse()
Thu gọn các tùy chọn
Các tùy chọn có thể được chuyển qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy nối 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) | |
| toggle | boolean | true | Toggles the collapsible element on invocation |
Thu gọn các phương thức
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 | |
| .collapse("show") | Shows the collapsible element | |
| .collapse("hide") | Hides the collapsible element | |
| .collapse("dispose") | Destroys the collapsible element |
Thu gọn sự kiện
Bảng sau đây 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 | |
| shown.bs.collapse | Occurs when the collapsible element is fully shown (after CSS transitions have completed) | |
| hide.bs.collapse | Occurs when the collapsible element is about to be hidden | |
| hidden.bs.collapse | Occurs when the collapsible element is fully hidden (after CSS transitions have completed) |