Bạn có biết rằng có một giải pháp HTML5 gốc để dễ dàng tạo một nút đọc thêm/bớt đàn accordion để ẩn và hiển thị nội dung với KHÔNG có JavaScript hoặc CSS. Đọc để tìm hiểu làm thế nào.
Mô hình và Các thẻ HTML5 chính thức là một phần tử tiện ích tiết lộ, nhưng kết hợp với Các thẻ HTML5 sẽ cung cấp cho bạn một đàn accordion chỉ thuần HTML.
Ý nghĩa không có JS HOẶC CSS là cần thiết. Thật tuyệt làm sao!
Đây là một ví dụ hiển thị một phần tử đơn giản với và .
Đây là mã:
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>và đây là giao diện của nó:
Tìm hiểu thêm
Đây là một accordion HTML5 gốc để ẩn và tiết lộ nội dung. Khá tuyệt, phải không?
Học như thế nào? Mô hình thẻ đóng vai trò như một trình bao bọc cho một phần tử có thể được mở hoặc đóng. Người dùng phải nhấp vào nhãn là để mở hoặc đóng phần tử.
Còn về phong cách và hành vi?
Phong cách
Bạn có thể áp dụng kiểu CSS để tùy chỉnh giao diện của hộp văn bản tiết lộ. Bên dưới cung cấp kiểu giao diện theo thẻ:
details {
font: 16px "Open Sans", Calibri, sans-serif;
width: 620px;
}
details > summary {
padding: 2px 6px;
width: 15em;
background-color: #ddd;
border: none;
box-shadow: 3px 3px 4px black;
cursor: pointer;
}
details > p {
border-radius: 0 0 10px 10px;
background-color: #ddd;
padding: 2px 6px;
margin: 0;
box-shadow: 3px 3px 4px black;
}
details[open] > summary {
background-color: #ccf;
}Theo mặc định, con trỏ xuất hiện giống như một mũi tên, nhưng nếu bạn muốn nó là một chỉ tay thay vào đó, hãy sử dụng cái này:
details {
cursor: pointer;
}Hành vi
Việc thiết lập các hành vi là rất hạn chế, thực sự chỉ có một điều bạn có thể làm và đó là làm cho văn bản được tiết lộ mở theo mặc định.
Để bắt đầu đàn accordion ở trạng thái mở, hãy thêm Boolean mở thuộc tính nhãn:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>Tìm hiểu thêm
Đây là một accordion HTML5 gốc để ẩn và tiết lộ nội dung. Khá tuyệt, phải không?
Tôi có thể sử dụng những thuộc tính nào?
Các thuộc tính dưới đây có thể được sử dụng cho nhãn:
| đặc tính | Giá trị | Tổng kết |
|---|---|---|
| mở | mở | Mặc định là đừng mở. |
| id | giá trị | Cung cấp một số nhận dạng duy nhất. |
| tốt nghiệp lớp XNUMX | tên lớp | Gán tên lớp cho phần tử. |
| phong cách | CSS-giá trị | Gán các kiểu CSS cho phần tử. |
Vậy những hạn chế là gì? Luôn luôn có một nắm bắt, phải không?
Không hỗ trợ cho Internet Explorer
Đàn accordion chỉ dành cho HTML5 này sẽ không hoạt động trong bất kỳ phiên bản Internet Explorer nào. Nếu bạn phải hỗ trợ IE11, bạn sẽ phải sử dụng một giải pháp dự phòng khác bằng cách sử dụng JQuery. Tất cả các trình duyệt khác đều hỗ trợ và .
Không có hoạt ảnh hoặc chuyển tiếp tùy chỉnh
Mặc dù bạn có thể sửa đổi và tạo kiểu cho giao diện (như được hiển thị ở trên), nhưng bạn sẽ không thể thực hiện bất kỳ hoạt ảnh hoặc chuyển tiếp hiển thị văn bản nào. Nếu bạn muốn làm điều đó, bạn sẽ cần một giải pháp đàn accordion CSS/JSS khác.
Trình đọc màn hình và khả năng truy cập
Đây là bản địa HTML5 và nó * nên * có thể truy cập được nhưng đã phát hiện ra rằng văn bản được tiết lộ thực tế không phải lúc nào cũng được trình đọc màn hình thông báo một cách chính xác.
Tài liệu tham khảo: