jquery göster / gizle (show/hide) menü yapımı

jquery göster / gizle (show/hide) menü yapımı

Javascript derslerimiz bittiğine göre artık biraz daha ileri gidip hazır kütüphane ve frameworklere değinebiliriz


jquery ile basit bir şekilde göster gizle veya aç kapa şeklinde
menü, tab vb. gibi çalışabilecek basit bir jquery uylamasını nasıl yapabileceğiniz hakkında
işinize yarayabilece örnek bir uygulama geliştirelim
bu kod parçası çok basit olacak amacı size bu olayın mantığı anlamanızı sağlamak.
bu uygulamada jquery'nin show ve hide vede css fonksiyonlarından faydalanacağız.

Uygulama içerisinde yorum satırları arasında gerekli açıklamalar mevcutur, umaraım yardımcı olur.

// jquery başlar...
$(function(){

//tetikleyecek olana elemanımıza click olunduğunda duruma göre gösterilecek veyahut gösterilemeyecek
//siz isterseniz bunu click değil hover vb. şekillerde de kulanabilirsiniz.
$("#tetikleyecekEleman").click(function(){

//gösterilecek veya gösterilmeyecek olan elemanının o anki cssdeki display durumunu alalım
var durum = $("#gosterilecekVeyaGizlenecekEleman").css("display");

//eğer eleman none yani gizli ise
if(durum == 'none') {
//elmanın gizli durumunu iptal edip görünür hale getirelim
$("#gosterilecekVeyaGizlenecekEleman").show();
} else {
//zaten görünür halde ise gizli hale getirelim.
$("#gosterilecekVeyaGizlenecekEleman").hide();
}

});

});
// jquery bitter

html için herhnagi bir kod eklemesinde bulunmadım, ki zaten bu seviyede bir yazılımcının
verilen kodlara bağlı olarak kendi html kodlarını cıkartabilir.
Yinede kısaca örnek vermek gerekirse

<span id="tetikleyecekEleman">AÇ / KAPAT</span>
<div id="gosterilecekVeyaGizlenecekEleman"> Gösterilecek yada gösterilmeyecek olan içerik burada olacak </div>

span yada div yerine siz istediğiniz html elemanını kulanabilirsiniz burada dikkat etmeniz gereken id değerleridir