Работа з метадам toggleClass у jQuery

Існуе таксама карысны метад toggleClass, які будзе дадаваць паказаны клас, калі яго няма, і прыбіраць яго, калі ён ёсць. Ён можа спатрэбіцца, каб па кліку на адну і тую ж кнопку з элементам старонкі адбываліся перыядычныя змены.

Разгледзім дадзены метад на прыкладзе. Хай у нас ёсць наступныя CSS стылі:

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

Таксама ёсць абзац з класам zzz:

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

Давайце, напрыклад, зробім так, каб пры першым націску на кнопку, элементу будзе дадавацца клас red, які дадае чырвоны колер, а пры паўторным - гэты клас будзе прыбірацца і чырвоны колер будзе знікаць. Калі зноў націснуць на кнопку - усё паўторыцца зноў.

Паспрабуйце запусціце наступны код і пераканайцеся ў гэтым (клас zzz вылучае курсівам, каб паказаць, што toggleClass не будзе перашкаджаць іншым класам працаваць):

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

Пасля першага націску HTML код стане выглядаць так (дадасца клас red):

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

А пасля другога націску - так (знікне клас red):

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

Дадайце ўсім li клас www, калі яго няма, і выдаліце, калі ёсць.