Travail avec la méthode toggleClass dans jQuery
Il existe également une méthode utile,
toggleClass,
qui ajoutera la classe spécifiée si elle est absente,
et la retirera si elle est présente.
Elle peut être nécessaire pour que des changements périodiques
se produisent avec un élément de la page lors d'un clic
sur le même bouton.
Examinons cette méthode avec un exemple. Supposons que nous ayons les styles CSS suivants :
.red {
color: red;
}
.zzz {
font-style: italic;
}
Il y a aussi un paragraphe avec la classe zzz :
<p class="zzz" id="test">text</p>
<button>click</button>
Faisons, par exemple, en sorte qu'au premier clic
sur le bouton, la classe red, qui ajoute la couleur rouge,
soit ajoutée à l'élément, et qu'au deuxième clic -
cette classe soit retirée et la couleur rouge disparaisse.
Si on clique à nouveau sur le bouton - tout se répétera.
Essayez d'exécuter le code suivant et voyez par vous-même
(la classe zzz met le texte en
italique,
pour montrer que toggleClass n'interfère pas
avec le fonctionnement des autres classes) :
$('button').click(function() {
$('#test').toggleClass('red');
});
Après le premier clic, le code HTML deviendra
(la classe red sera ajoutée) :
<p class="zzz red" id="test">text</p>
<button>click</button>
Et après le deuxième clic - comme ceci
(la classe red disparaîtra) :
<p class="zzz" id="test">text</p>
<button>click</button>
Ajoutez à tous les li la classe www,
si elle n'est pas présente, et retirez-la si elle est présente.
