jQuery'de toggleClass Metodu ile Çalışma

Ayrıca, belirtilen sınıfı yoksa ekleyen ve varsa kaldıran faydalı bir toggleClass metodu bulunmaktadır. Bir sayfa öğesiyle aynı düğmeye tıklandığında periyodik değişiklikler olması için gerekli olabilir.

Bu metodu bir örnek üzerinde inceleyelim. Aşağıdaki CSS stillerine sahip olduğumuzu varsayalım:

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

Ayrıca zzz sınıfına sahip bir paragraf var:

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

Örneğin, düğmeye ilk basıldığında, öğeye kırmızı rengi ekleyen red sınıfının ekleneceği, ikinci kez basıldığında ise bu sınıfın kaldırılacağı ve kırmızı rengin kaybolacağı şekilde ayarlayalım. Düğmeye tekrar basılırsa, her şey tekrarlanacak.

Aşağıdaki kodu çalıştırmayı deneyin ve bundan emin olun (zzz sınıfı, italik olarak vurgular, toggleClass'ın diğer sınıfların çalışmasını engellemeyeceğini göstermek için):

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

İlk tıklamadan sonra HTML kodu şu şekilde görünecektir (red sınıfı eklenecek):

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

İkinci tıklamadan sonra ise şu şekilde olacaktır (red sınıfı kaybolacak):

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

Tüm li öğelerine, www sınıfı yoksa ekleyin ve varsa kaldırın.