Toggle js là gì

Phương thức toggle() trong jQuery

Để dễ dàng tiếp thu bài hướng dẫn này thì trước tiên bạn cần xem qua:

• Phương thức hide() trong jQuery
• Phương thức show() trong jQuery

1) Phương thức toggle() trong jQuery

- Phương thức toggle() dùng để thực hiện luân phiên giữa việc hiện & ẩn một phần tử.

- Ví dụ: Khi bạn bấm vào nút , nếu phần tử bên dưới đang hiện thì nó sẽ bị ẩn đi, còn nếu phần tử bên dưới đang bị ẩn thì nó sẽ được hiện lên.

- Lưu ý:

• Một phần tử bị ẩn bởi phương thức toggle() thì cũng tương tự như việc phần tử đó được thiết lập thuộc tính display với giá trị none trong CSS.
• Phương thức toggle() chỉ có thể hiển thị những phần tử bị ẩn bởi thuộc tính display:none chứ không có tác dụng với phần tử bị ẩn bởi thuộc tính visibility:hidden trong CSS.

2) Cách sử dụng phương thức toggle() trong jQuery

- Để sử dụng phương thức toggle(), ta dùng cú pháp như sau:$(selector).toggle(time,speed,callback);

- Dưới đây là bảng mô tả ý nghĩa & cách sử dụng các tham số trong phương thức toggle(): Tham số Yêu cầu Mô tả ý nghĩa & cách sử dụng time Không bắt buộc

- Chỉ định khoảng thời gian mà phần tử bắt đầu được hiện (ẩn) cho đến khi hiện (ẩn) hoàn toàn.

- Tham số này có thể được xác định bởi một trong ba loại giá trị:

• số mili giây cụ thể
• "slow"
• "fast"

- Lưu ý: Mặc định thì khoảng thời gian mà phần tử bắt đầu được hiện (ẩn) cho đến khi hiện (ẩn) hoàn toàn là 400 mili giây. speed Không bắt buộc

- Chỉ định tốc độ hiện (ẩn) phần tử ở những thời điểm khác nhau.

- Tham số này có thể được xác định bởi một trong hai loại giá trị:

• "swing" - chậm ở đoạn đầu & cuối, nhanh ở đoạn giữa.
• "linear" - tốc độ không đổi.

- Lưu ý: Mặc định thì tốc độ hiện (ẩn) phần tử là không đổi ("swing") callback Không bắt buộc - Một hàm callback sẽ được thực thi sau khi phương thức toggle() đã được thực thi hoàn tất.

3) Một số ví dụVí dụ 1:

Xem ví dụ Ví dụ 2:

Xem ví dụ Ví dụ 3:

Xem ví dụ Ví dụ 4:

Xem ví dụ  Bài 01: Tìm hiểu tổng quan về jQuery Bài 02: jQuery Syntax Bài 03: jQuery Selectors Bài 04: Cách hiện và ẩn một phần tử Bài 05: Cách hiện và ẩn một phần tử (với hiệu ứng phai màu) Bài 06: jQuery Callback Bài 07: Cách hiện và ẩn một phần tử (với hiệu ứng trượt) Bài 08: jQuery Animate Bài 09: Phương thức Stop() Bài 10: jQuery Get Bài 11: jQuery Remove Bài 12: jQuery CSS Classes Bài 13: jQuery Ancestors jQuery Selectors (tất cả bộ chọn trong jQuery) jQuery Event (tất cả sự kiện trong jQuery) jQuery Methods (các phương thức cơ bản trong jQuery) jQuery HTML/CSS (các phương thức dùng để xử lý HTML/CSS trong jQuery)

Video liên quan