Basculer entre deux classes CSS
La librairie jQuery propose plusieurs méthodes qui permettent de déclencher tantôt une action, tantôt une autre. Cet effet de permutation est repris sous le terme de toggle. Nous le rencontrerons plusieurs fois dans notre exploration de jQuery.
Outre des effets spectaculaires, ces méthodes entraînent une économie appréciable de lignes de code.
toggleClass(classe) toggleClass
Ajoute la classe CSS spécifiée si elle n’est pas présente, retire la classe CSS spécifiée si elle est présente.
$(p).toggleClass("classe1") : applique la classe classe1 aux paragraphes <p> si elle n’est pas présente. Si elle l’est, enlève la classe classe1.
Cette méthode retourne un objet jQuery.
Depuis la version 1.4 de jQuery, il est possible de réaliser cet effet de permutation en passant par une fonction.
toggleClass(fonction(index, classe actuelle), [commutateur]) toggleClass
Où :
-
fonction spécifie une fonction qui retourne le nom de la classe qui doit être permutée.
-
index (optionnel) est la position d’index de l’élément sélectionné.
-
classe actuelle (optionnel) est le nom de la classe actuelle.
-
commutateur est une valeur booléenne (true ou false) qui détermine si la classe doit être ajoutée ou retirée.
Exemple
$('div.petite').toggleClass(function() {
...
Conditions générales d'utilisationCopyright - © Editions ENI ||Politique de protection des données du groupe ENI