Sụp đổ

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.

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

Nói chung, chúng tôi khuyên bạn nên sử dụng một nút có data-bs-targetthuộc tính. Mặc dù không được đề xuất từ ​​quan điểm ngữ nghĩa, bạn cũng có thể sử dụng liên kết với hrefthuộc tính (và a role="button"). Trong cả hai trường hợp, data-bs-toggle="collapse"yêu cầu là bắt buộc.

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

Nằm ngang

Plugin thu gọn cũng hỗ trợ thu gọn theo chiều ngang. Thêm .collapse-horizontallớp bổ trợ để chuyển đổi widththay vì heightvà đặt a widthtrên phần tử con ngay lập tức. Hãy thoải mái viết Sass tùy chỉnh của riêng bạn, sử dụng các kiểu nội tuyến hoặc sử dụng các tiện ích chiều rộng của chúng tôi .

<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </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 một bộ chọn trong thuộc tính hrefhoặc của nó data-bs-target. 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-bs-targetthuộc tính của họ

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-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">
        Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </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ử có thể thu gọn). 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-bs-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 tùy chọn khác nhau được mô tả trong mẫu đàn accordion Hướng dẫn Thực hành Tác giả ARIA - bạn sẽ cần tự bao gồm các tương tác này với JavaScript tùy chỉnh.

Sass

Biến

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

Các lớp học

Các lớp chuyển tiếp thu gọn có thể được tìm thấy scss/_transitions.scssvì chúng được chia sẻ trên nhiều thành phần (thu gọn và đàn accordion).

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

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-bs-toggle="collapse"và a data-bs-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-bs-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-bs-parent="#selector". Tham khảo trang accordion để biết thêm thông tin.

Qua JavaScript

Bật theo cách thủ công với:

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

Tùy chọn

Vì các tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript, bạn có thể thêm tên tùy chọn vào data-bs-, như trong data-bs-animation="{value}". Đảm bảo thay đổi kiểu chữ hoa của tên tùy chọn từ “ camelCase ” thành “ kebab-case ” khi chuyển các tùy chọn qua thuộc tính dữ liệu. Ví dụ, sử dụng data-bs-custom-class="beautifier"thay vì data-bs-customClass="beautifier".

Kể từ Bootstrap 5.2.0, tất cả các thành phần đều hỗ trợ thuộc tính dữ liệu dành riêng thử nghiệmdata-bs-config có thể chứa cấu hình thành phần đơn giản dưới dạng chuỗi JSON. Khi một phần tử có data-bs-config='{"delay":0, "title":123}'và data-bs-title="456"các thuộc tính, titlegiá trị cuối cùng sẽ là 456và các thuộc tính dữ liệu riêng biệt sẽ ghi đè các giá trị được cho trên data-bs-config. Ngoài ra, các thuộc tính dữ liệu hiện có có thể chứa các giá trị JSON như data-bs-delay='{"show":0,"hide":150}'.

Phương pháp

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.

Bạn có thể tạo một thể hiện thu gọn với hàm tạo, ví dụ:

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

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.

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})