Trabalhando com o método toggleClass no jQuery

Existe também um método útil toggleClass, que irá adicionar a classe especificada, se ela não estiver presente, e removê-la se estiver. Pode ser necessário para que, ao clicar no mesmo botão, ocorram mudanças periódicas com o elemento da página.

Vamos considerar este método com um exemplo. Suponha que temos os seguintes estilos CSS:

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

Há também um parágrafo com a classe zzz:

<p class="zzz" id="test">texto</p>
<button>clique</button>

Vamos, por exemplo, fazer com que ao primeiro clique no botão, o elemento adicione a classe red, que adiciona a cor vermelha, e ao segundo clique - esta classe será removida e a cor vermelha desaparecerá. Se clicar no botão novamente - tudo se repetirá.

Tente executar o seguinte código e veja por si mesmo (a classe zzz destaca o texto em itálico, para mostrar que o toggleClass não atrapalhará o funcionamento de outras classes):

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

Após o primeiro clique, o código HTML ficará assim (a classe red será adicionada):

<p class="zzz red" id="test">texto</p>
<button>clique</button>

E após o segundo clique - assim (a classe red desaparecerá):

<p class="zzz" id="test">texto</p>
<button>clique</button>

Adicione a classe www a todos os li, se não estiver presente, e remova-a se estiver.