JQuery toggle() phương pháp này có thể được coi như một công tắc đèn. Khi được gọi, nó sẽ chuyển đổi các phần tử đã chọn “bật” hoặc “tắt”. Đó là, nó chuyển đổi giữa các phần tử hiển thị cho người dùng hoặc ẩn chúng. Trong ví dụ sau, chúng ta sẽ khám phá cách sử dụng toggle() để ẩn và hiển thị văn bản khi một nút được nhấp vào.
jQuery toggle () là gì?
JQuery toggle() phương thức hiển thị hoặc ẩn các phần tử đã chọn trên một trang web. Giống như từ ngụ ý, phương pháp này hoạt động giống như một công tắc đèn để chuyển đổi các phần tử “bật” hoặc “tắt”. Điển hình là toggle() phương thức được gọi với các nút HTML nhưng thực sự có thể được gọi trên bất kỳ phần tử nào được chọn.
Ngoài việc chuyển đổi màn hình giữa “bật” và “tắt”, jQuery toggle() chấp nhận một đối số trong khoảng thời gian. Đối số thời lượng có thể là kiểu dữ liệu số hoặc chuỗi. Cung cấp đối số thời lượng sẽ tạo hoạt ảnh kéo dài trong thời gian đã chỉ định.
jQuery toggle() cũng chấp nhận một hàm gọi lại để thực thi khi hoạt ảnh hoàn tất. Hãy nhớ rằng, một hàm gọi lại là một hàm được chuyển cho một hàm khác để được thực thi sau này. Nếu không có đối số nào được cung cấp, toggle() sẽ chỉ cần chuyển đổi màn hình “bật” hoặc “tắt”.
Hãy xem cú pháp cơ bản và sau đó tìm hiểu sâu hơn với mã ví dụ. Mã ví dụ của chúng tôi sẽ bao gồm hoạt ảnh chuyển đổi giữa ảnh và văn bản.
toggle () Cú pháp jQuery
Như đã nêu trong phần giới thiệu của chúng tôi, jQuery toggle() theo mặc định có thể coi phương thức này như một công tắc đèn. Sau khi được nhấp vào, nó sẽ chuyển thành phần đã chọn “bật” hoặc “tắt” trên màn hình. Giống như bất kỳ phương thức jQuery nào, một phần tử phải được chọn trước toggle() được gọi là.
Hãy xem một ví dụ bằng cách sử dụng toggle() không có đối số. Bắt đầu với tệp HTML của chúng tôi:
<button> Click me </button> <p> Read me! </p> <p id="hide" style="display: none"> NO! Read ME! </p>
Từ đây, chúng ta có thể thấy tệp HTML của chúng ta đang hiển thị một nút và hai thẻ đoạn. Lưu ý thuộc tính style của thẻ
với id "hide". Đặt hiển thị thành không sẽ ẩn phần tử đoạn đó khỏi màn hình.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Tệp HTML của chúng tôi đang hiển thị chính xác như chúng tôi dự đoán. Bây giờ, hãy sử dụng chuyển đổi jQuery để hiển thị thẻ
ẩn. Trong ví dụ này, chúng tôi sẽ đưa jQuery của chúng tôi vào bên trong tệp HTML. Để làm được điều này, chúng ta phải bọc jQuery của mình trong thẻ