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:

javascript$(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:

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

Nhiều lớp CSS:

javascript$(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:

javascript$(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:

javascript$(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]);

Ví dụ

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

html<p id="test" class="eee ggg">văn bản</p>

javascript$('#test').toggleClass('www');

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

html<p id="test" class="eee ggg www">văn bản</p>

Ví dụ

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

html<p id="test" class="eee ggg www">văn bản</p>

javascript$('#test').toggleClass('www');

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

html<p id="test" class="eee ggg">văn bản</p>

Xem thêm