Arbejde med toggleClass-metoden i jQuery

Der findes også en nyttig metode kaldet toggleClass, som tilføjer den angivne klasse, hvis den ikke er der, og fjerner den, hvis den er der. Den kan være nyttig, når du ved et klik på den samme knap ønsker, at der sker periodiske ændringer med et element på siden.

Lad os se på denne metode med et eksempel. Antag, at vi har følgende CSS-stilarter:

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

Der er også et afsnit med klassen zzz:

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

Lad os for eksempel gøre det sådan, at ved det første klik på knappen, bliver klassen red tilføjet til elementet, hvilket giver rød farve, og ved det andet klik - bliver denne klasse fjernet, og den røde farve forsvinder. Hvis du klikker på knappen igen - gentages alt.

Prøv at køre følgende kode og overbevis dig selv om dette (klassen zzz fremhæver med kursiv, for at vise, at toggleClass ikke forstyrrer andre klasser):

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

Efter det første klik vil HTML-koden se sådan ud (klassen red tilføjes):

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

Og efter det andet klik - sådan her (klassen red forsvinder):

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

Tilføj klassen www til alle li, hvis den ikke findes, og fjern den, hvis den gør.