Метод toggleClass

Методът toggleClass редува добавяне/премахване на CSS клас: ако го няма - го добавя, ако го има - го премахва.

Синтаксис

Един CSS клас:

javascript$(селектор).toggleClass(име на клас);

Само да се добави или премахне CSS клас в зависимост от втория параметър, който приема стойности true или false:

javascript$(селектор).toggleClass(име на CSS клас, състояние);

Няколко CSS класа:

javascript$(селектор).toggleClass(['клас1', 'клас2', 'клас3', '...']);

Само да се добавят или премахнат CSS класове в зависимост от втория параметър:

javascript$(селектор).toggleClass(['клас1', 'клас2', 'клас3', '...'], състояние');

Прилагане на функция към всеки елемент в набора, състоянието може да бъде true или false, и указва на метода - само да добави или само да премахне CSS клас:

javascript$(селектор).toggleClass(function(номер в набора, текущи класове на елемента, състояние), [състояние]);

Пример

Нашият параграф вече има два класа. Нека добавим още един клас www:

html<p id="test" class="eee ggg">текст</p>

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

HTML кодът ще изглежда така:

html<p id="test" class="eee ggg www">текст</p>

Пример

А сега класът www вече присъства в елемента - нека го премахнем:

html<p id="test" class="eee ggg www">текст</p>

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

HTML кодът ще изглежда така:

html<p id="test" class="eee ggg">текст</p>

Вижте също