Làm thế nào để bạn chuyển đổi sụp đổ?

Nội dung có thể thu gọn phổ biến đối với những thứ như danh sách Câu hỏi thường gặp và các danh sách khác chứa các mục nội dung có trong tiêu đề

Thu gọn bằng Liên kết

Bạn có thể sử dụng liên kết để thu gọn nội dung. Để thực hiện việc này, hãy sử dụng thẻ

1 với giá trị

2 của ID nội dung để thu gọn

Trên vùng chứa của nội dung có thể thu gọn, hãy thêm lớp

3 và đảm bảo cung cấp cho nó một ID

Chạy

Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp

Xem trước trình chỉnh sửa

Thu gọn bằng một nút

Để sử dụng một nút, hãy sử dụng thuộc tính

4 với giá trị là ID của nội dung để thu gọn

Trên vùng chứa của nội dung có thể thu gọn, hãy thêm lớp

3 và đảm bảo cung cấp cho nó một ID

Chạy

Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp

Xem trước trình chỉnh sửa

đàn phong cầm

Để tạo một "accordion", hãy thêm lớp

6 vào nội dung có thể thu gọn để nội dung đó được mở rộng khi tải trang. Cũng sử dụng

7 trong trường hợp này

Bạn có thể sử dụng plugin JavaScript thu gọn Bootstrap để dễ dàng hiển thị và ẩn [hoặc mở rộng và thu gọn] các phần tử cụ thể trên trang web. Các nút và neo [i. e. các phần tử và

1] thường được sử dụng làm trình kích hoạt được ánh xạ tới các phần tử bạn muốn chuyển đổi

Mở rộng và thu gọn các phần tử thông qua thuộc tính dữ liệu

Bạn có thể hiển thị và ẩn các phần tử trong Bootstrap bằng cách nhấp vào nút hoặc liên kết qua thuộc tính dữ liệu mà không cần viết bất kỳ mã JavaScript nào. Hãy thử một ví dụ và xem nó thực sự hoạt động như thế nào

Toggle Element

2

3

Chúng tôi vừa tạo một điều khiển có thể thu gọn mà không cần viết bất kỳ mã JavaScript nào. Chà, hãy lần lượt đi qua từng phần của mã này để hiểu rõ hơn

Giải thích mã

Plugin thu gọn Bootstrap về cơ bản yêu cầu hai yếu tố hoạt động chính xác - yếu tố kích hoạt như nút hoặc siêu liên kết và chính yếu tố có thể thu gọn

• Thuộc tính
  4 được thêm vào phần tử kích hoạt hoặc bộ điều khiển cùng với thuộc tính
  5 [đối với nút] hoặc
  6 [đối với neo] để 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
  5 hoặc
  6 chấp nhận bộ chọn CSS [chẳng hạn như bộ chọn id
  9 trong ví dụ của chúng tôi] để áp dụng thu gọn cho một phần tử cụ thể
• Lớp

  Toggle Element
  

  00 được thêm vào phần tử có thể thu gọn [dòng số 6]
• Bạn có thể tùy chọn thêm lớp

  Toggle Element
  

  01 [dòng số 6] vào phần tử có thể thu gọn ngoài lớp

  Toggle Element
  

  00 để mở theo mặc định

Để làm cho các điều khiển có thể thu gọn hoạt động theo nhóm như menu đàn accordion, bạn có thể sử dụng thành phần thẻ Bootstrap. Xem hướng dẫn về Bootstrap accordion để tìm hiểu thêm về nó

Mở rộng và thu gọn các phần tử thông qua JavaScript

Bạn cũng có thể mở rộng và thu gọn các phần tử theo cách thủ công thông qua JavaScript — chỉ cần gọi phương thức Bootstrap

Toggle Element

03 với bộ chọn

Toggle Element

04 hoặc

Toggle Element

05 của phần tử có thể thu gọn

Tùy chọn

Có một số tùy chọn nhất định có thể được chuyển đến phương thức Bootstrap của

Toggle Element

03 để tùy chỉnh chức năng của phần tử có thể thu gọn

Toggle Element

0_______20Default ValueDescriptionparentselectorfalseTất cả các phần tử có thể thu gọn khác trong phần tử gốc được chỉ định sẽ bị đóng trong khi mục có thể thu gọn này được hiển thị khi gọi. togglebooleantrueToggles phần tử có thể thu gọn khi gọi

Bạn cũng có thể đặt các tùy chọn này bằng cách sử dụng thuộc tính dữ liệu trên đàn accordion — chỉ cần thêm tên tùy chọn vào

Toggle Element

07, chẳng hạn như

Toggle Element

08,

Toggle Element

09

phương pháp

Đây là các phương thức thu gọn của bootstrap tiêu chuẩn

tùy chọn vượt qua

Ngoài ra, bạn có thể chuyển sang phần thu gọn bằng cách sử dụng đối tượng tùy chọn

Trong ví dụ sau, màn hình của phần tử có thể thu gọn sẽ không bật khi gọi, vì tùy chọn

00 cho phần tử có thể thu gọn được đặt thành

01

chuyển đổi

Phương pháp này chuyển đổi [hiển thị hoặc ẩn] một phần tử có thể thu gọn

buổi bieu diễn

Phương pháp này hiển thị một phần tử có thể thu gọn

ẩn giấu

Phương pháp này ẩn một phần tử có thể thu gọn

vứt bỏ

Phương pháp này phá hủy sự sụp đổ của một phần tử [i. e. xóa dữ liệu được lưu trữ trên phần tử DOM]

getInstance

Đây là một phương thức tĩnh cho phép bạn lấy phiên bản thu gọn được liên kết với một phần tử DOM

getOrCreateInstance

Đây là một phương thức tĩnh cho phép bạn lấy phiên bản thu gọn được liên kết với một phần tử DOM hoặc tạo một phiên bản mới trong trường hợp nếu quá trình thu gọn không được khởi tạo

Mẹo. Các phương thức tĩnh không thể được gọi trên các thể hiện của lớp [i. e. các đối tượng]. Họ được gọi trên chính lớp học. Từ khóa

02 được sử dụng để định nghĩa một phương thức tĩnh cho một lớp

Sự kiện

Lớp thu gọn Bootstrap bao gồm một vài sự kiện để nối vào chức năng thu gọn

Sự kiệnMô tảshow. bs. sụp đổSự kiện này kích hoạt ngay lập tức khi phương thức thể hiện show được gọi. cho xem. bs. sụp đổSự kiện này được kích hoạt khi phần tử thu gọn được hiển thị cho người dùng. Nó sẽ đợi cho đến khi quá trình chuyển đổi CSS hoàn tất trước khi bị kích hoạt. ẩn giấu. bs. sụp đổSự kiện này được kích hoạt ngay lập tức khi phương thức ẩn được gọi. ẩn giấu. bs. sụp đổSự kiện này được kích hoạt khi phần tử thu gọn đã bị ẩn khỏi người dùng. Nó sẽ đợi cho đến khi quá trình chuyển đổi CSS hoàn tất trước khi bị kích hoạt

Ví dụ sau hiển thị thông báo cảnh báo cho người dùng khi quá trình chuyển đổi trượt của phần tử có thể thu gọn đã hoàn tất

Nút thu gọn mở rộng là gì?

Tại sao sự sụp đổ không hoạt động trong góc?