Att arbeta med metoden toggleClass i jQuery

Det finns också en användbar metod toggleClass, som lägger till den angivna klassen om den inte finns, och tar bort den om den finns. Den kan behövas för att klick på samma knapp ska få sidans element att genomgå periodiska förändringar.

Låt oss överväga denna metod med ett exempel. Låt oss säga att vi har följande CSS-stilar:

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

Det finns också ett stycke med klassen zzz:

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

Låt oss till exempel göra så att vid det första klicket på knappen, läggs klassen red till i elementet, vilket lägger till röd färg, och vid det andra klicket - denna klass kommer att tas bort och den röda färgen försvinner. Om knappen klickas igen - allt upprepas igen.

Försök att köra följande kod och se det själv (klassen zzz markerar kursiv, för att visa att toggleClass inte stör andra klasser från att fungera):

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

Efter det första klicket kommer HTML-koden att se ut så här (klassen red läggs till):

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

Och efter det andra klicket - så här (klassen red försvinner):

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

Lägg till klassen www till alla li, om den inte finns, och ta bort den om den finns.