A toggleClass metódus használata jQuery-ben

Létezik egy hasznos metódus, toggleClass, amely hozzáadja a megadott osztályt, ha az még nincs jelen, és eltávolítja, ha már megvan. Ez akkor lehet szükséges, ha egy gombra kattintva ugyanazzal az oldalelemmel periodikus változtatásokat szeretnénk elérni.

Nézzük meg ezt a metódust egy példán keresztül. Tegyük fel, hogy a következő CSS stílusok vannak:

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

Van egy bekezdésünk is a zzz osztállyal:

html<p class="zzz" id="test">szöveg</p>
<button>kattintás</button>

Tegyük fel például, hogy az első gombnyomásra a red osztály kerül hozzáadásra az elemhez, ami piros színt ad, majd egy újabb kattintásra ez az osztály eltávolításra kerül, és a piros szín eltűnik. Ha ismét megnyomjuk a gombot, minden ismétlődni fog.

Próbáld ki a következő kódot, és győződj meg róla (a zzz osztály dőlt betűvel jeleníti meg a szöveget, hogy megmutassa, a toggleClass nem akadályozza a többi osztály működését):

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

Az első kattintás után a HTML kód így fog kinézni (a red osztály hozzáadódik):

html<p class="zzz red" id="test">szöveg</p>
<button>kattintás</button>

A második kattintás után pedig így (a red osztály eltűnik):

html<p class="zzz" id="test">szöveg</p>
<button>kattintás</button>