Darbas su toggleClass metodu jQuery

Taip pat yra naudingas metodas toggleClass, kuris pridės nurodytą klasę, jei jos nėra, ir pašalins ją, jei ji yra. Jis gali būti naudingas, kai paspaudus tą patį mygtuką su puslapio elementu vyksta periodiniai pakeitimai.

Panagrinėkime šį metodą pavyzdžiu. Tarkime, kad turime šiuos CSS stilius:

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

Taip pat yra pastraipa su klase zzz:

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

Pavyzdžiui, padarykime taip, kad pirmu mygtuko paspaudimu, elementui bus pridėta klasė red, kuri prideda raudoną spalvą, o paspaudus antrą kartą - ši klasė bus pašalinta ir raudona spalva dings. Jei vėl paspausite mygtuką - viskas kartosis dar kartą.

Pabandykite paleisti šį kodą ir įsitikinkite šiuo (klasė zzz pažymi kursyvu, kad parodytų, jog toggleClass nebus trukdyti kitoms klasėms veikti):

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

Po pirmo paspaudimo HTML kodas atrodys taip (bus pridėta klasė red):

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

O po antro paspaudimo - taip (dings klasė red):

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

Pridėkite visiems li klasę www, jei jos nėra, ir pašalinkite, jei yra.