Метод 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">текст</p>
$('#test').toggleClass('www');
HTML кодът ще изглежда така:
<p id="test" class="eee ggg www">текст</p>
Пример
А сега класът www вече присъства в елемента
- нека го премахнем:
<p id="test" class="eee ggg www">текст</p>
$('#test').toggleClass('www');
HTML кодът ще изглежда така:
<p id="test" class="eee ggg">текст</p>
Вижте също
-
методите
addClass,removeClass,hasClass -
JavaScript свойството
classList,
с помощта на което можете да редувате добавяне/премахване на клас на чист JavaScript