Phương thức toggleClass

Phương thức toggleClass chuyển đổi giữa thêm/xóa lớp CSS: nếu không có - sẽ thêm, nếu có - sẽ xóa.

Cú pháp

Một lớp CSS:

$(bộ chọn).toggleClass(tên lớp);

Chỉ thêm hoặc xóa lớp CSS tùy thuộc vào tham số thứ hai, nhận giá trị true hoặc false:

$(bộ chọn).toggleClass(tên lớp CSS, trạng thái);

Nhiều lớp CSS:

$(bộ chọn).toggleClass(['lớp1', 'lớp2', 'lớp3', '...']);

Chỉ thêm hoặc xóa các lớp CSS tùy thuộc vào tham số thứ hai:

$(bộ chọn).toggleClass(['lớp1', 'lớp2', 'lớp3', '...'], trạng thái);

Áp dụng hàm cho mỗi phần tử trong tập hợp, trạng thái có thể là true hoặc false, và chỉ định cho phương thức - chỉ thêm hoặc chỉ xóa lớp CSS:

$(bộ chọn).toggleClass(function(số thứ tự trong tập hợp, các lớp hiện tại của phần tử, trạng thái), [trạng thái]);

Đoạn văn của chúng ta đã có hai lớp. Hãy thêm cho nó lớp www:

văn bản $('#test').toggleClass('www');

Mã HTML sẽ trở thành như thế này:

văn bản

Và bây giờ lớp www đã có trong phần tử - hãy xóa nó:

văn bản $('#test').toggleClass('www');

Mã HTML sẽ trở thành như thế này:

văn bản

các phương thức addClass, removeClass, hasClass
Thuộc tính JavaScript classList,
nhờ nó có thể chuyển đổi thêm/xóa lớp bằng JavaScript thuần