Μέθοδος toggleClass
Η μέθοδος toggleClass εναλλάσσει την προσθήκη/αφαίρεση
CSS κλάσης: αν δεν υπάρχει - την προσθέτει, αν υπάρχει - την αφαιρεί.
Σύνταξη
Μία CSS κλάση:
$(επιλογέας).toggleClass(όνομα κλάσης);
Να προσθέσει ή να αφαιρέσει μόνο την CSS κλάση ανάλογα
με τη δεύτερη παράμετρο, που δέχεται τιμές
true ή false:
$(επιλογέας).toggleClass(όνομα CSS κλάσης, κατάσταση);
Πολλαπλές CSS κλάσεις:
$(επιλογέας).toggleClass(['κλάση1', 'κλάση2', 'κλάση3', '...']);
Να προσθέσει ή να αφαιρέσει μόνο τις CSS κλάσεις ανάλογα με τη δεύτερη παράμετρο:
$(επιλογέας).toggleClass(['κλάση1', 'κλάση2', 'κλάση3', '...'], κατάσταση');
Εφαρμογή συνάρτησης σε κάθε στοιχείο στο σύνολο,
η κατάσταση μπορεί να είναι true ή false,
και υποδεικνύει στη μέθοδο - να προσθέσει μόνο ή να αφαιρέσει μόνο
την CSS κλάση:
$(επιλογέας).toggleClass(function(αριθμός στο σύνολο, τρέχουσες κλάσεις στοιχείου, κατάσταση), [κατάσταση]);
Παράδειγμα
Στην παράγραφό μας υπάρχουν ήδη δύο κλάσεις. Ας
προσθέσουμε και την κλάση www:
<p id="test" class="eee ggg">κείμενο</p>
$('#test').toggleClass('www');
Ο κώδικας HTML θα γίνει ως εξής:
<p id="test" class="eee ggg www">κείμενο</p>
Παράδειγμα
Και τώρα η κλάση www υπάρχει ήδη στο στοιχείο
- ας την αφαιρέσουμε:
<p id="test" class="eee ggg www">κείμενο</p>
$('#test').toggleClass('www');
Ο κώδικας HTML θα γίνει ως εξής:
<p id="test" class="eee ggg">κείμενο</p>
Δείτε επίσης
-
μέθοδοι
addClass,removeClass,hasClass -
JavaScript ιδιότητα
classList,
με τη βοήθεια της οποίας μπορείτε να εναλλάσσετε την προσθήκη/αφαίρεση κλάσης σε καθαρό JavaScript
