Работа с метода toggleClass в jQuery

Съществува и полезен метод toggleClass, който ще добави указания клас, ако го няма, и ще го премахне, ако има. Може да е необходим, за да се случват периодични промени с кликване върху един и същи бутон с елемент от страницата.

Нека разгледаме този метод с пример. Нека имаме следните CSS стилове:

css.red {
  color: red;
}
  
.zzz {
  font-style: italic;
}

Има и абзац с клас zzz:

html<p class="zzz" id="test">text</p>
<button>click</button>

Нека, например, направим така, че при първото натискане на бутона, на елемента ще се добави клас red, който добавя червен цвят, а при повторно - този клас ще бъде премахнат и червеният цвят ще изчезне. Ако отново се натисне бутона - всичко ще се повтори.

Опитайте да стартирате следния код и се убедете в това (клас zzz выделява курсив, за да покаже, че toggleClass няма да пречи на другите класове да работят):

javascript$('button').click(function() {
  $('#test').toggleClass('red');
});

След първото натискане HTML кодът ще изглежда така (ще се добави клас red):

html<p class="zzz red" id="test">text</p>
<button>click</button>

А след второто натискане - така (ще изчезне клас red):

html<p class="zzz" id="test">text</p>
<button>click</button>