Bootstrap: Collapse collapse.js
Giới thiệu
Sử dụng các style cơ sở và hỗ trợ một cách linh hoạt cho các thành phần collapsible như accordion hay thành điều hướng.
Tính phụ thuộc của plugin
Collapse yêu cầu plugin transition phải được tích hợp sẵn trong phiên bản Bootstrap của bạn.
Ví dụ về accordion
Sử dụng plugin collapse, chúng ta sẽ xây dựng một accordion đơn giản bằng cách mở rộng thành phần panel.
<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="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
Bạn cũng có thể sử dụng plugin mà không cần biết markup của accordion. Biến một nút thành một phần tử điều khiển, đi kích hoạt việc mở rộng hoặc thu gọn phần tử khác.
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
simple collapsible
</button>
<div id="demo" class="collapse in">...</div>
Cách sử dụng
Plugin collapse sử dụng một số ít các class để xử lý:
.collapsesử dụng để ẩn nội dung.collapse.insử dụng để hiển thị nội dung.collapsingđược thêm vào khi transition bắt đầu, và sẽ bị xóa bỏ khi transition kết thúc
Các class này nằm trong tập tin component-animations.less.
Thông qua các thuộc tính dữ liệu
Bạn chỉ cần thêm data-toggle="collapse" và data-target vào một phần tử mà bạn muốn biến nó về dạng collapsible. Thuộc tínhdata-target nhận giá trị là một selector như một phần tử đích . Hãy chắc chắn thêm class collapse vào phần tử collapsible. Nếu bạn muốn mặc định là mở, Hãy thêm class bổ sung in.
Để thêm bộ quản lý nhóm tương tự như accordion vào một collapsible control, hãy thêm vào thuộc tính data-parent="#selector". Hãy xem demo để hiểu rõ hơn.
Thông qua JavaScript
Bạn có thể kích hoạt bằng tay với:
$('.collapse').collapse()
Các tùy chọn
Các tùy chọn có thể được truyền vào thông 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 thêm tên của tùy chọn vào sau data-, tương tự như data-parent="".
| Tên | Loại | Mặc định | Mô tả |
|---|---|---|---|
| parent | selector | false | Nếu một selector được truyền vào thì toàn bộ các phần tử collapsible khác là con của phần tử cha được truyền vào ấy sẽ bị đóng lại khi phần tử này được mở ra. (tương tự như hoạt động của accordion - phụ thuộc vào class panel) |
| toggle | boolean | true | Đóng/mở phần tử collapsible khi kích hoạt |
Các phương thức
.collapse(options)
Biến nội dung của bạn thành một phần tử collapsible, nhận đầu vào là mộtobject tùy chọn.
$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle')
Đóng/mở một phần tử collapsible.
.collapse('show')
Mở một phần tử collapsible.
.collapse('hide')
Đóng một phần tử collapsible.
Các sự kiện
Class collapse của Bootstrap cho phép một số sự kiện can thiệp vào tính năng collapse.
| Loại sự kiện | Mô tả |
|---|---|
| show.bs.collapse | Sự kiện này xảy ra ngay khi phương thức show được gọi. |
| shown.bs.collapse | Sự kiện này xảy ra khi một phần tử collapse đã được mở ra (đang chờ CSS transition kết thúc). |
| hide.bs.collapse | Sự kiện này xảy ra ngay khi phương thức hide được gọi. |
| hidden.bs.collapse | Sự kiện này xảy ra khi một phần tử collapse đã được đóng lại (đang chờ CSS transition kết thúc). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something…
})