Работа с методом 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, если
его нет, и удалите, если есть.