Thu gọn JS Bootstrap
Thu gọn JS (collapse.js)
Nhận các kiểu cơ sở và hỗ trợ linh hoạt cho các thành phần có thể thu gọn như đàn xếp và điều hướng.
Sự phụ thuộc của plugin: Thu gọn yêu cầu phải đưa plugin chuyển tiếp vào phiên bản Bootstrap của bạn.
Để 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.
Các lớp plugin thu gọn
| Class | Description | Example |
|---|---|---|
| .collapse | Hides the content | Try it |
| .collapse in | Shows the content | 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 bổ sung vào.
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 |
|---|---|---|---|
| parent | selector | false | All collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the panel class) - See example below |
| toggle | boolean | true | Toggles the collapsible element on invocation |
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 |
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 |
Thêm ví dụ
Có thể thu gọn đơn giản
Ví dụ sau đây tạo một nút chuyển đổi nội dung mở rộng và thu gọn của một phần tử khác:
Ví dụ
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">
Simple collapsible
</button>
<div id="demo" class="collapse in">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</div> Hãy tự mình thử »Bảng điều khiển có thể gập lại
Ví dụ sau đây cho thấy một bảng có thể thu gọn:
Ví dụ
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div> Hãy tự mình thử »Nhóm danh sách có thể thu gọn
Phần sau đây hiển thị một bảng điều khiển có thể thu gọn với một nhóm danh sách bên trong:
Ví dụ
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
</div> Hãy tự mình thử »Đàn xếp
Ví dụ sau đây cho thấy một chiếc đàn accordion đơn giản bằng cách mở rộng thành phần bảng điều khiển:
Lưu ý: Thuộc tính data-parent đảm bảo rằng tất cả các phần tử có thể thu gọn bên dưới phần tử gốc được chỉ định sẽ bị đóng khi một trong các mục có thể thu gọn được hiển thị.
Ví dụ
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
</div> Hãy tự mình thử »Mở rộng và thu gọn Chuyển đổi biểu tượng & văn bản
Ví dụ sau thay đổi văn bản và biểu tượng mở/đóng khi mở và đóng nội dung có thể thu gọn:
Ví dụ
$(document).ready(function(){
$("#demo").on("hide.bs.collapse", function(){
$(".btn").html('<span class="glyphicon glyphicon-collapse-down"></span> Open');
});
$("#demo").on("show.bs.collapse", function(){
$(".btn").html('<span class="glyphicon glyphicon-collapse-up"></span> Close');
});
}); Hãy tự mình thử »Hoặc bạn có thể sử dụng CSS:
Ví dụ
/* Icon when the collapsible content is shown */
.btn:after {
font-family: "Glyphicons Halflings";
content: "\e114";
}
/* Icon when the collapsible content is hidden */
.btn.collapsed:after {
content: "\e080";
} Hãy tự mình thử »