0
0
jQuery toggle özelliği tıklamalarımızı ve tıklamalarımızın sonrasında yapmak istediklerimizi kontrol edebileceğimiz bir jquery fonksiyonudur. İşlem yapmak istediğimiz eleman için iki farklı işlem belirlediğimizi düşünürsek, eleman üzerindeki birinci tıklamada belirlediğimiz birinci işlem, ikinci tıklamada belirlediğimiz ikinci işlem gerçekleşecektir.
Kullanım şekli;
$(".uzmanim").toggle();
şeklindedir. Örnek ile açıklamak gerekirse;
$(".goster").click(function(){ $(".uzmanim").toggle(1000); });
Örneğimizde "goster" isimli class' a tıklandığında "uzmanim" class'ına sahip elemanımız toggle fonksiyonu ile 1 saniye içinde gözecektir. "goster" isimli class'ımıza tekrar tıklanıldığında ise 1 saniye içinde kaybolacaktır.
toggle bir elemanın css özelliklerinden display özelliğinin kontrol edilebilmeside vardır. İşlem yapmak istediğimiz elemanın display özelliği block ise none, none ise block olarak değiştirilir. Yani eleman kapalı ise açılır açık ise kapatılır. Bu özelliğin kullanımı aşağıdaki gibidir. Bunun için show/hide komutlarını kullanabiliriz.
$(".uzmanim").toggle("show");
$(".uzmanim").toggle("hide");
toggle kullanım şekillerinden bir diğeri ise her tıklamaya denk gelen özelliğin çalıştırılmasıdır. Kullanım şekli aşağıdaki gibidir.
$(".uzmanim").toggle( function () { // birinci tıklamadaki işlemler }, function () { // ikinci tıklamadaki işlemler }, function () { // üçüncü tıklamadaki işlemler } );
Her tıklama için bir function açıyoruz. Bu function larıda virgül(,) ile ayırmamız gerekiyor.
Bu kullanıma örnek olarak her tıklamada işlem yapmak istediğimiz katmanın arka plan rengini değiştirebileceğimiz bir fonksiyon bulunmaktadır.
$("#uzmanim").toggle( function () { $("#Ornek1").css("background", "#ff0000"); }, function () { $("#Ornek2").css("background", "#00ff00"); }, function () { $("#Ornek1").css("background", "#0000ff"); } );
Cevap yazabilmek için üye girişi yapmalısınız.
Eğer uzmanim.net üyesiyseniz giriş yapabilirsiniz: üye girişi yap
uzmanim.net'e üye olmak çok kolaydır: hemen kayıt ol
25 Ocak 2018 uzmanim.net güncellemesi
30 Haziran 2017 uzmanim.net güncellemesi
26 Aralık 2016 uzmanim.net güncellemesi
08 Eylül 2016 uzmanim.net kural ihlali yapan kullanıcılar ve yaptırımlar