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

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

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

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

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

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

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

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

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

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

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

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

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

Добавете на всички li клас www, ако го няма, и го премахнете, ако има.