A toggleClass metódus használata jQuery-ben

Létezik egy hasznos metódus, toggleClass, amely hozzáadja a megadott osztályt, ha az még nincs jelen, és eltávolítja, ha már megvan. Ez akkor lehet szükséges, ha egy gombra kattintva ugyanazzal az oldalelemmel periodikus változtatásokat szeretnénk elérni.

Nézzük meg ezt a metódust egy példán keresztül. Tegyük fel, hogy a következő CSS stílusok vannak:

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

Van egy bekezdésünk is a zzz osztállyal:

<p class="zzz" id="test">szöveg</p>
<button>kattintás</button>

Tegyük fel például, hogy az első gombnyomásra a red osztály kerül hozzáadásra az elemhez, ami piros színt ad, majd egy újabb kattintásra ez az osztály eltávolításra kerül, és a piros szín eltűnik. Ha ismét megnyomjuk a gombot, minden ismétlődni fog.

Próbáld ki a következő kódot, és győződj meg róla (a zzz osztály dőlt betűvel jeleníti meg a szöveget, hogy megmutassa, a toggleClass nem akadályozza a többi osztály működését):

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

Az első kattintás után a HTML kód így fog kinézni (a red osztály hozzáadódik):

<p class="zzz red" id="test">szöveg</p>
<button>kattintás</button>

A második kattintás után pedig így (a red osztály eltűnik):

<p class="zzz" id="test">szöveg</p>
<button>kattintás</button>

Adj hozzá minden li elemhez a www osztályt, ha az még nincs jelen, és távolítsd el, ha már megvan.