jQuery sự kiện - phương thức toggle()

Tài liệu tham khảo sự kiện jQuery

Mô hình

Chuyển đổi màu nền khác nhau:

($("p").toggle()),
  function(){
  ($("body").css("background-color","green");),
  function(){
  $("body").css("background-color","red");},
  function(){
  $("body").css("background-color","yellow");}
);

Thử ngay

Định nghĩa và cách sử dụng

Phương thức toggle() được sử dụng để gắn hai hoặc nhiều hàm xử lý sự kiện vào phần tử được chọn để phản hồi sự kiện click luân phiên của phần tử được chọn.

Phương thức này cũng có thể được sử dụng để chuyển đổi hide() và show() Phương thức.

Gắn hai hoặc nhiều phương thức vào sự kiện Toggle

Chuyển đổi giữa hai hoặc nhiều phương thức khi phần tử được chỉ định được nhấp.

Nếu quy định hai hoặc nhiều phương thức, phương thức toggle() sẽ chuyển đổi tất cả các phương thức. Ví dụ, nếu có ba phương thức, lần nhấp đầu tiên sẽ gọi phương thức đầu tiên, lần nhấp thứ hai gọi phương thức thứ hai, lần nhấp thứ ba gọi phương thức thứ ba. Lần nhấp thứ tư lại gọi phương thức đầu tiên, và thế là.

Cú pháp

$(selector).toggle(function1(),function2(),functionN(),...)

Thử ngay

Tham số Mô tả
function1() Bắt buộc. Quy định phương thức được chạy khi phần tử được nhấp vào mỗi lần chẵn.
function2() Bắt buộc. Quy định phương thức được chạy khi phần tử được nhấp vào mỗi lần lẻ.
functionN(),... Tùy chọn. Quy định các phương thức khác cần chuyển đổi.

Chuyển đổi Hide() và Show()

Kiểm tra mỗi phần tử có hiển thị hay không.

Nếu phần tử đã ẩn, chạy phương thức show(). Nếu phần tử hiển thị, chạy phương thức hide(). Như vậy có thể tạo ra hiệu ứng chuyển đổi.

Cú pháp

$(selector).toggle(speed,callback)

Thử ngay

Tham số Mô tả
speed

Tùy chọn. Quy định tốc độ của hiệu ứng ẩn/hiện. Mặc định là "0".

Giá trị có thể:

  • miliseconds (ví dụ 1500)
  • "slow"
  • "normal"
  • "fast"
callback

Tùy chọn. Chức năng được thực thi khi phương thức toggle() hoàn thành.

Nếu bạn muốn học thêm về callback, hãy truy cập Hướng dẫn Callback 函数。

Hiển thị hoặc ẩn phần tử

Quy định có nên chỉ hiển thị hoặc chỉ ẩn tất cả các phần tử khớp hay không.

Cú pháp

$(selector).toggle(switch)

Thử ngay

Tham số Mô tả
switch

Bắt buộc. Giá trị boolean, quy định toggle() có nên chỉ hiển thị hoặc chỉ ẩn tất cả các phần tử được chọn hay không.

  • true - Hiện phần tử
  • false - Ẩn phần tử

Tài liệu tham khảo sự kiện jQuery