Práce s metodou toggleClass v jQuery

Existuje také užitečná metoda toggleClass, která přidá zadanou třídu, pokud není přítomna, a odstraní ji, pokud je. Může se hodit, když po kliknutí na stejné tlačítko s prvkem stránky mají nastat periodické změny.

Podívejme se na tuto metodu na příkladu. Předpokládejme, že máme následující CSS styly:

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

Také je zde odstavec s třídou zzz:

html<p class="zzz" id="test">text</p>
<button>click</button>

Udělejme například to, aby po prvním stisknutí tlačítka byl prvku přidán třída red, která přidává červenou barvu, a po opakovaném - tato třída bude odstraněna a červená barva zmizí. Pokud znovu stisknete tlačítko - vše se zopakuje.

Zkuste spustit následující kód a přesvědčte se o tom (třída zzz zvýrazňuje kurzívou, aby ukázala, že toggleClass nebude bránit práci ostatních tříd):

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

Po prvním stisknutí bude HTML kód vypadat takto (přidá se třída red):

html<p class="zzz red" id="test">text</p>
<button>click</button>

A po druhém stisknutí - takto (zmizí třída red):

html<p class="zzz" id="test">text</p>
<button>click</button>