Arbeid med metoden toggleClass i jQuery

Det finnes også en nyttig metode toggleClass, som vil legge til den angitte klassen, hvis den ikke er der, og fjerne den hvis den er der. Den kan være nødvendig for at ved klikk på en og samme knapp med et sideelement skal det skje periodiske endringer.

La oss se på denne metoden med et eksempel. La oss si at vi har følgende CSS-stiler:

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

Det er også et avsnitt med klassen zzz:

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

La oss for eksempel gjøre slik at ved første trykk på knappen, vil elementet få klassen red lagt til, som legger til rød farge, og ved neste trykk - vil denne klassen bli fjernet og den røde fargen vil forsvinne. Hvis du trykker på knappen igjen - vil alt gjentas igjen.

Prøv å kjøre følgende kode og overbevis deg selv om dette (klassen zzz markerer kursiv, for å vise at toggleClass ikke vil forstyrre andre klasser fra å fungere):

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

Etter første trykk vil HTML-koden se ut som følger (klassen red vil bli lagt til):

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

Og etter andre trykk - slik (klassen red forsvinner):

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

Legg til klassen www til alle li, hvis den ikke er der, og fjern den hvis den er der.