Advertisement
  1. Web Design
  2. JavaScript
Webdesign

Cách xây dựng một thành phần Accordion bằng CSS và một ít JavaScript

by
Difficulty:BeginnerLength:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong bài hướng dẫn hôm nay, chúng ta sẽ tìm hiểu cách xây dựng thành phần ẩn/hiện với CSS và một chút JavaScript. Mặc định, jQuery cung cấp phương thức slideToggle cho phép chúng ta tạo ra các accordion với chuyển động trượt. Thách thức của chúng ta là bắt chước chức năng này với JavaScript thuần túy.

Đây là thành phần mà chúng ta sẽ tạo:

Lưu ý: tính năng này được cung cấp bởi các phần tử gốc <details><summary>, tuy vậy những phần tử này vẫn chưa được hỗ trợ trong các trình duyệt của Microsoft.

1. Phần HTML

Để bắt đầu, chúng ta định nghĩa một phần tử với lớp container chứa hai phần tử con:

  • button sẽ ẩn và hiển thị nội dung (bao gồm biểu tượng SVG nội tuyến)
  • nội dung thật sự

Nó sẽ tương tự như dưới đây:

2. Phần CSS

CSS thì khá đơn giản. Chúng ta cần định nghĩa hai lớp trợ giúp (ví dụ: hideshow).

Để ẩn và hiện phần tử mục tiêu, chúng ta sẽ sử dụng thuộc tính height, nhưng chúng ta sẽ không chỉ định giá trị của nó trong CSS. Thay vào đó, chúng ta sẽ linh hoạt thiết lập giá trị độ cao thông qua JavaScript.

Một điều cần lưu ý là chúng ta không sử dụng thuộc tính display để chuyển đổi chế độ hiển thị của nội dung. Thuộc tính đó không nằm trong số các thuộc tính CSS có thể hoạt hình.

Dưới đây là CSS tương ứng:

3. Phần JavaScript

Bây giờ là lúc để thảo luận về code JavaScript của chúng ta sẽ hoạt động như thế nào.

Đầu tiên, ngay sau khi DOM đã sẵn sàng, chúng ta lấy chiều cao của phần tử .info và sau đó ngay lập tức thiết lập giá trị của nó thành 0.

Hãy nhớ rằng tùy thuộc vào nội dung của bạn (ví dụ, nếu nội dung đó bao gồm cả hình ảnh), bạn có thể phải kẹp đoạn mã bên trên bên trong sự kiện load.

Tiếp theo, khi button .toggle-btn được nhấp, chúng ta thực hiện các công việc sau:

  • Chuyển đổi chế độ hiển thị của các phần tử .less.more.
  • Tính toán lại chiều cao của phần tử .info. Nếu nó là 0 (giá trị thiết lúc đầu), điều đó có nghĩa là nội dung đang ẩn, vì thế chúng ta hiện nó ra bằng cách thiết lập chiều cao thành chiều cao ban đầu (được lưu trong biến infoHeight). Mặt khác, nếu nội dung đang được hiển thị, chúng ta ẩn nó bằng cách thiết lập chiều cao của nó là 0.
  • Không bắt buộc, chúng ta đảm bảo rằng .toggle-btn sẽ chỉ được nhấp một lần cho đến khi hiệu ứng động kết thúc (nó kéo dài 500 mili giây).

Dưới đây là code cài đặt tất cả hành vi đó:

Kích thước trình duyệt thay đổi

Bước tiếp theo là đảm bảo rằng thành phần sẽ hoạt động chính xác khi cửa sổ trình duyệt được thay đổi kích thước.

Đây là code JS cần thiết cho điều đó:

4. Trình duyệt Hỗ trợ

Bản demo của chúng ta sẽ hoạt động tốt trong tất cả các trình duyệt và thiết bị mới. Ngoài ra, như thường lệ, chúng ta sử dụng Babel để biên dịch mã ES6 xuống ES5.

Kết luận

Trong bài hướng dẫn ngắn này, chúng ta đã xây dựng một thành phần ẩn/hiện theo kiểu accordion với CSS và JavaScript. Nhờ vào thuộc tính height có thể hoạt hình, chúng ta đã thêm hiệu ứng trượt-vào/trượt-ra vào thành phần của chúng ta.

Lưu ý, chúng ta vẫn chưa cân nhắc khả năng truy cập, vì vậy nếu bạn muốn nâng cao chức năng của nó thì đó chắc chắn có thể là bước tiếp theo.

Hướng dẫn khác "Với một ít JavaScript"


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.