Метод toggleClass

Метод 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