Метод toggleClass - добавление/удаление CSS класса элемента через jQuery
Метод toggleClass чередует добавление/удаление
CSS класса: если его нет - добавит, если есть - удалит.
Синтаксис
Один CSS класс:
$(селектор).toggleClass(имя класса);
Только добавить или удалить CSS класс в зависимости
от второго параметра, который принимает значения
true или false:
$(селектор).toggleClass(имя CSS класса, состояние);
Несколько CSS классов:
$(селектор).toggleClass(['класс1', 'класс2', 'класс3', '...']);
Только добавить или удалить CSS классы в зависимости от второго параметра:
$(селектор).toggleClass(['класс1', 'класс2', 'класс3', '...'], состояние');
Применение функции к каждому элементу в наборе,
состояние может быть true или false,
и указывает методу - только добавить или только
удалить CSS класс:
$(селектор).toggleClass(function(номер в наборе, текущие классы элемента, состояние), [состояние]);
Пример
У нашего абзаца уже есть два класса. Давайте
добавим ему еще и класс www:
<p id="test" class="eee ggg">text</p>
$('#test').toggleClass('www');
HTML код станет выглядеть так:
<p id="test" class="eee ggg www">text</p>
Пример
А теперь класс www уже есть в элементе
- давайте его удалим:
<p id="test" class="eee ggg www">text</p>
$('#test').toggleClass('www');
HTML код станет выглядеть так:
<p id="test" class="eee ggg">text</p>
Смотрите также
-
методы
addClass,removeClass,hasClass -
JavaScript свойство
classList,
с помощью которого можно чередовать добавление/удаление класса на чистом JavaScript