Método toggleClass
O método toggleClass alterna entre adicionar/remover
uma classe CSS: se não estiver presente, adiciona; se estiver presente, remove.
Sintaxe
Uma classe CSS:
$(seletor).toggleClass(nome da classe);
Apenas adicionar ou remover a classe CSS dependendo
do segundo parâmetro, que aceita os valores
true ou false:
$(seletor).toggleClass(nome da classe CSS, estado);
Várias classes CSS:
$(seletor).toggleClass(['classe1', 'classe2', 'classe3', '...']);
Apenas adicionar ou remover as classes CSS dependendo do segundo parâmetro:
$(seletor).toggleClass(['classe1', 'classe2', 'classe3', '...'], estado');
Aplicação de uma função a cada elemento no conjunto,
o estado pode ser true ou false,
e indica ao método - apenas adicionar ou apenas
remover a classe CSS:
$(seletor).toggleClass(function(índice no conjunto, classes atuais do elemento, estado), [estado]);
Exemplo
Nosso parágrafo já tem duas classes. Vamos
adicionar a classe www a ele:
<p id="test" class="eee ggg">texto</p>
$('#test').toggleClass('www');
O código HTML ficará assim:
<p id="test" class="eee ggg www">texto</p>
Exemplo
Agora a classe www já está presente no elemento
- vamos removê-la:
<p id="test" class="eee ggg www">texto</p>
$('#test').toggleClass('www');
O código HTML ficará assim:
<p id="test" class="eee ggg">texto</p>
Veja também
-
métodos
addClass,removeClass,hasClass -
Propriedade JavaScript
classList,
com a qual é possível alternar entre adicionar/remover classes em JavaScript puro
