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ẽ tạo hiệu ứng động cho
Toggle first element
Toggle second element
Toggle both elements
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.
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.
7 từ giá trị hiện tại của nó thành
Toggle first element
Toggle second element
Toggle both elements
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.
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.
8. Dựa vào cách CSS xử lý hoạt ảnh, bạn không thể sử dụng
Toggle first element
Toggle second element
Toggle both elements
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.
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.
9 trên phần tử
Toggle first element
Toggle second element
Toggle both elements
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.
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.
0. Thay vào đó, hãy sử dụng lớp như một phần tử gói độc lậpThí dụ
Nhấp vào các nút bên dưới để hiển thị và ẩn phần tử khác thông qua thay đổi lớp
0 ẩn nội dungToggle first element Toggle second element Toggle both elements
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.
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.
2 được áp dụng trong quá trình chuyển đổiToggle first element Toggle second element Toggle both elements
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.
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.
3 hiển thị nội dungToggle first element Toggle second element Toggle both elements
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.
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.
Nói chung, chúng tôi khuyên bạn nên sử dụng nút có thuộc tính
Toggle first element
Toggle second element
Toggle both elements
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.
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.
4. Mặc dù không được đề xuất theo quan điểm ngữ nghĩa, nhưng bạn cũng có thể sử dụng liên kết có thuộc tính
Toggle first element
Toggle second element
Toggle both elements
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.
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.
5 [và một
Toggle first element
Toggle second element
Toggle both elements
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.
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.
6]. Trong cả hai trường hợp,
Toggle first element
Toggle second element
Toggle both elements
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.
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.
7 là bắt buộcLiên kết với nút href với data-bs-target
Một số nội dung giữ chỗ cho thành phần thu gọn. Bảng này được ẩn theo mặc định nhưng sẽ hiển thị khi người dùng kích hoạt trình kích hoạt có liên quan
________số 8
Nhiều mục tiêu
A hoặc
Toggle first element
Toggle second element
Toggle both elements
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.
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.
8có 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 trong thuộc tính
Toggle first element
Toggle second element
Toggle both elements
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.
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.
5 hoặc
Toggle first element
Toggle second element
Toggle both elements
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.
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.
4 của nó. Nhiều hoặc
Toggle first element
Toggle second element
Toggle both elements
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.
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.
8có thể hiển thị và ẩn một phần tử nếu mỗi phần tử tham chiếu phần tử đó với thuộc tính
Toggle first element
Toggle second element
Toggle both elements
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.
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.
5 hoặc
Toggle first element
Toggle second element
Toggle both elements
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.
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.
4 của chúngChuyển đổi phần tử đầu tiên
Chuyển đổi phần tử thứ hai Chuyển đổi cả hai phần tửMột số nội dung giữ chỗ cho thành phần thu gọn đầu tiên của ví dụ đa thu gọn này. Bảng này được ẩn theo mặc định nhưng sẽ hiển thị khi người dùng kích hoạt trình kích hoạt có liên quan
Một số nội dung giữ chỗ cho thành phần thu gọn thứ hai của ví dụ đa thu gọn này. Bảng này được ẩn theo mặc định nhưng sẽ hiển thị khi người dùng kích hoạt trình kích hoạt có liên quan
Toggle first element
Toggle second element
Toggle both elements
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.
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.
khả năng tiếp cận
Đảm bảo thêm
Toggle first element
Toggle second element
Toggle both elements
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.
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.
64 vào thành phần điều khiển. Thuộc tính này truyền tải rõ ràng trạng thái hiện tại của phần tử có thể thu gọn 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à
Toggle first element
Toggle second element
Toggle both elements
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.
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.
65. Nếu bạn đã đặt phần tử có thể thu gọn thành mở theo mặc định bằng cách sử dụng lớp
Toggle first element
Toggle second element
Toggle both elements
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.
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.
66, thay vào đó, hãy đặt
Toggle first element
Toggle second element
Toggle both elements
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.
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.
67 trên điều khiển. 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 [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 gắn 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 [e. g. , một
Toggle first element
Toggle second element
Toggle both elements
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.
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.
8or], nên thêm thuộc tính
Toggle first element
Toggle second element
Toggle both elements
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.
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.
6 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 một phần tử có thể thu gọn duy nhất – tôi. e. thuộc tính
Toggle first element
Toggle second element
Toggle both elements
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.
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.
4 đang trỏ đến bộ chọn
Toggle first element
Toggle second element
Toggle both elements
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.
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.
31 – bạn nên thêm thuộc tính
Toggle first element
Toggle second element
Toggle both elements
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.
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.
32 vào phần tử điều khiển, chứa
Toggle first element
Toggle second element
Toggle both elements
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.
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.
31 của phần tử có thể 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ọnLưu ý rằng 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 Thực tiễn soạn thảo WAI-ARIA 1. 1 mẫu đàn accordion - bạn sẽ cần tự thêm những mẫu này bằng JavaScript tùy chỉnh
ngổ ngáo
Biến
Toggle first element
Toggle second element
Toggle both elements
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.
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.
6Các lớp học
Có thể tìm thấy các lớp chuyển tiếp thu gọn trong
Toggle first element
Toggle second element
Toggle both elements
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.
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.
34 vì chúng được chia sẻ trên nhiều thành phần [thu gọn và đàn accordion]
Toggle first element
Toggle second element
Toggle both elements
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.
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.
3Cách sử dụng
Plugin thu gọn sử dụng một vài lớp để xử lý việc nâng vật nặng
0 ẩn nội dungToggle first element Toggle second element Toggle both elements
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.
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.
3 hiển thị nội dungToggle first element Toggle second element Toggle both elements
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.
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.
2 được thêm vào khi quá trình chuyển đổi bắt đầu và bị xóa khi quá trình chuyển đổi kết thúcToggle first element Toggle second element Toggle both elements
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.
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.
Các lớp này có thể được tìm thấy trong
Toggle first element
Toggle second element
Toggle both elements
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.
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.
38Thông qua thuộc tính dữ liệu
Chỉ cần thêm
Toggle first element
Toggle second element
Toggle both elements
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.
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.
7 và một
Toggle first element
Toggle second element
Toggle both elements
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.
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.
4 và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 tính
Toggle first element
Toggle second element
Toggle both elements
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.
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.
4 chấp nhận bộ chọn CSS để áp dụng thu gọn cho. Đảm bảo thêm lớp
Toggle first element
Toggle second element
Toggle both elements
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.
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.
62 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
Toggle first element
Toggle second element
Toggle both elements
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.
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.
66Để thêm tính năng quản lý nhóm giống như đàn accordion vào khu vực có thể thu gọn, hãy thêm thuộc tính dữ liệu
Toggle first element
Toggle second element
Toggle both elements
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.
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.
64. Tham khảo bản demo để thấy điều này trong thực tếQua JavaScript
Kích hoạt thủ công với
Toggle first element
Toggle second element
Toggle both elements
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.
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.
6Tùy chọ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 các thuộc tính dữ liệu, hãy thêm tên tùy chọn vào
Toggle first element
Toggle second element
Toggle both elements
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.
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.
65, như trong
Toggle first element
Toggle second element
Toggle both elements
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.
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.
66NameTypeDefaultDescription____367bộ chọn. đối tượng jQuery. Phần tử DOM______368Nếu cấp độ gốc được cung cấp, thì tất cả các phần tử có thể thu gọn bên dưới cấp độ 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 của đàn accordion truyền thống - điều này phụ thuộc vào lớp
Toggle first element
Toggle second element
Toggle both elements
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.
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.
69]. Thuộc tính phải được đặt trên khu vực có thể thu gọn mục tiêu.
Toggle first element
Toggle second element
Toggle both elements
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.
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.
50boolean
Toggle first element
Toggle second element
Toggle both elements
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.
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.
51Bật/tắt phần tử có thể thu gọn khi gọiphươ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 đều không đồng bộ và bắt đầu quá trình chuyển đổi. Họ quay lại người gọi ngay khi quá trình chuyển đổi bắt đầu nhưng trước khi quá trình chuyển đổi kết thúc. Ngoài ra, một cuộc gọi phương thức trên một thành phần chuyển tiếp sẽ bị bỏ qua