Рад са методом toggleClass у jQuery

Постоји такође корисни метод toggleClass, који ће додати наведену класу, ако је нема, и уклонити је ако постоји. Може бити потребан, да би се кликом на исто дугме са елементом странице дешавале периодичне промене.

Размотримо овај метод на примеру. Нека имамо следеће CSS стилове:

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

Такође постоји пасус са класом zzz:

<p class="zzz" id="test">текст</p>
<button>клик</button>

Хајде да, на пример, урадимо тако да при првом притиску на дугме, елементу буде додата класа red, која додаје црвену боју, а при поновним - ова класа ће бити уклоњена и црвена боја ће нестати. Ако поново притиснете на дугме - све ће се поновити.

Покушајте да покренете следећи код и уверите се у томе (класа zzz означава курзивом, да покаже да toggleClass неће сметати другим класама да раде):

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

После првог притиска HTML код ће изгледати овако (додаће се класа red):

<p class="zzz red" id="test">текст</p>
<button>клик</button>

А после другог притиска - овако (нестаће класа red):

<p class="zzz" id="test">текст</p>
<button>клик</button>

Додајте свим li класу www, ако је нема, и уклоните је, ако постоји.