Sụp đổ
Chuyển đổi khả năng hiển thị của nội dung trong dự án của bạn bằng một vài lớp và các plugin JavaScript của chúng tôi.
Làm thế nào nó hoạt động
Plugin JavaScript thu gọn được sử dụng để hiển thị và ẩn nội dung. Các nút hoặc neo được sử dụng làm trình kích hoạt được ánh xạ tới các phần tử cụ thể mà bạn chuyển đổi. Thu gọn một phần tử sẽ làm động heighttừ giá trị hiện tại của nó thành 0. Với cách CSS xử lý hoạt ảnh, bạn không thể sử dụng paddingtrên một .collapsephần tử. Thay vào đó, hãy sử dụng lớp như một phần tử gói độc lập.
Hiệu ứng hoạt ảnh của thành phần này phụ thuộc vào prefers-reduced-motiontruy vấn phương tiện. Xem phần chuyển động giảm trong tài liệu hỗ trợ tiếp cận của chúng tôi .
Thí dụ
Nhấp vào các nút bên dưới để hiển thị và ẩn một phần tử khác thông qua các thay đổi lớp:
.collapseẩn nội dung.collapsingđược áp dụng trong quá trình chuyển đổi.collapse.showhiển thị nội dung
Bạn có thể sử dụng liên kết có hrefthuộc tính hoặc nút có data-targetthuộc tính. Trong cả hai trường hợp, data-toggle="collapse"yêu cầu là bắt buộc.
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>Nhiều mục tiêu
A <button>hoặc <a>có thể hiển thị và ẩn nhiều phần tử bằng cách tham chiếu chúng với bộ chọn JQuery trong hrefhoặc data-targetthuộc tính của nó. Nhiều <button>hoặc <a>có thể hiển thị và ẩn một phần tử nếu mỗi phần tử tham chiếu đến phần tử đó với hrefhoặc data-targetthuộc tính của họ
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-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">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
</div>Ví dụ về Accordion
Sử dụng thành phần thẻ , bạn có thể mở rộng hành vi thu gọn mặc định để tạo đàn accordion. Để đạt được phong cách đàn accordion đúng cách, hãy đảm bảo sử dụng .accordionlàm lớp bọc.
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-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="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-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="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-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>Khả năng tiếp cận
Đảm bảo thêm aria-expandedvào phần tử điều khiển. Thuộc tính này chuyển tải rõ ràng trạng thái hiện tại của phần tử có thể thu gọn được gắn với điều khiển tới trình đọc màn hình và các công nghệ hỗ trợ tương tự. Nếu phần tử có thể thu gọn được đóng theo mặc định, thì thuộc tính trên phần tử điều khiển phải có giá trị là aria-expanded="false". Nếu bạn đã đặt phần tử có thể thu gọn được mở theo mặc định bằng cách sử dụng showlớp, hãy đặt aria-expanded="true"trên điều khiển thay thế. Plugin sẽ tự động chuyển đổi thuộc tính này trên điều khiển dựa trên việc phần tử có thể thu gọn đã được mở hay đóng hay chưa (thông qua JavaScript hoặc do người dùng kích hoạt một phần tử điều khiển khác cũng được liên kết với cùng một phần tử di động). Nếu phần tử HTML của phần tử điều khiển không phải là một nút (ví dụ: một <a>hoặc <div>), thì thuộc tínhrole="button"nên được thêm vào phần tử.
Nếu phần tử điều khiển của bạn đang nhắm mục tiêu đến một phần tử có thể thu gọn - tức là data-targetthuộc tính đang trỏ đến một idbộ chọn - thì bạn nên thêm aria-controlsthuộc tính vào phần tử điều khiển, chứa thuộc tính của phần tử có idthể thu gọn. Trình đọc màn hình hiện đại và các công nghệ hỗ trợ tương tự sử dụng thuộc tính này để cung cấp cho người dùng các phím tắt bổ sung để điều hướng trực tiếp đến chính phần tử có thể thu gọn.
Lưu ý rằng việc triển khai hiện tại của Bootstrap không bao gồm các tương tác bàn phím khác nhau được mô tả trong mẫu đàn accordion 1.1 của WAI-ARIA Authoring Practice - bạn sẽ cần phải tự bao gồm các tương tác này với JavaScript tùy chỉnh.
Cách sử dụng
Plugin thu gọn sử dụng một số lớp để xử lý công việc nặng nhọc:
.collapseẩn nội dung.collapse.showhiển thị nội dung.collapsingđược thêm vào khi quá trình chuyển đổi bắt đầu và bị xóa khi kết thúc
Các lớp này có thể được tìm thấy trong _transitions.scss.
Qua các thuộc tính dữ liệu
Chỉ cần thêm data-toggle="collapse"và a data-targetvào phần tử để tự động gán quyền kiểm soát một hoặc nhiều phần tử có thể thu gọn. Thuộc data-targettính 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 lớp collapsevà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êm quản lý nhóm giống như đàn accordion vào một khu vực có thể thu gọn, hãy thêm thuộc tính dữ liệu data-parent="#selector". Tham khảo bản demo để thấy điều này trong hoạt động.
Qua JavaScript
Bật theo cách thủ công với:
$('.collapse').collapse()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="".
| Tên | Loại hình | Mặc định | Sự mô tả |
|---|---|---|---|
| cha mẹ | bộ chọn | đối tượng jQuery | Phần tử DOM | sai | Nếu phần tử gốc được cung cấp, thì tất cả các phần tử có thể thu gọn trong phần tử gốc được chỉ định sẽ bị đóng khi mục có thể thu gọn này được hiển thị. (tương tự như hành vi đàn accordion truyền thống - điều này phụ thuộc vào cardlớp). Thuộc tính phải được đặt trên vùng có thể thu gọn mục tiêu. |
| chuyển đổi | boolean | thật | Chuyển đổi phần tử có thể thu gọn khi gọi |
Phương pháp
Các phương thức và chuyển tiếp không đồng bộ
Tất cả các phương thức API là không đồng bộ và bắt đầu quá trình chuyển đổi . Chúng trở lại người gọi ngay sau khi quá trình chuyển đổi được bắt đầu nhưng trước khi quá trình chuyển đổi kết thúc . Ngoài ra, một lệnh gọi phương thức trên một thành phần chuyển tiếp sẽ bị bỏ qua .
Xem tài liệu JavaScript của chúng tôi để biết thêm thông tin .
.collapse(options)
Kích hoạt nội dung của bạn dưới dạng phần tử có thể thu gọn. Chấp nhận một tùy chọn tùy chọn object.
$('#myCollapsible').collapse({
toggle: false
}).collapse('toggle')
Chuyển đổi phần tử có thể thu gọn thành hiển thị hoặc ẩn. Trả về trình gọi trước khi phần tử thu gọn thực sự được hiển thị hoặc ẩn (tức là trước khi sự kiện shown.bs.collapsehoặc hidden.bs.collapsesự kiện xảy ra).
.collapse('show')
Hiển thị một phần tử có thể thu gọn. Trả về trình gọi trước khi phần tử thu gọn thực sự được hiển thị (tức là trước khi shown.bs.collapsesự kiện xảy ra).
.collapse('hide')
Ẩn một phần tử có thể thu gọn. Trả về trình gọi trước khi phần tử thu gọn thực sự bị ẩn (tức là trước khi hidden.bs.collapsesự kiện xảy ra).
.collapse('dispose')
Phá hủy sự sụp đổ của một phần tử.
Sự kiện
Lớp thu gọn của Bootstrap cho thấy một vài sự kiện để kết nối vào chức năng thu gọn.
| Loại sự kiện | Sự mô tả |
|---|---|
| show.bs.collapse | Sự kiện này kích hoạt ngay lập tức khi showphương thức thể hiện được gọi. |
| show.bs.collapse | Sự kiện này được kích hoạt khi một phần tử thu gọn được hiển thị cho người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất). |
| hide.bs.collapse | Sự kiện này được kích hoạt ngay lập tức khi hidephương thức đã được gọi. |
| hidden.bs.collapse | Sự kiện này được kích hoạt khi một phần tử thu gọn đã bị ẩn khỏi người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something…
})