soru sor sorular uzmanlar

Jquery ilk tıklamada gösterilip 2. tıklamada gizleme

demsinasbey (69) 7 yıl önce sordu

Merha öncelikle jquery hakkında pek bilgim olmadığını söylemek isterim aşağıdaki kodu da internetten araştıra araştıra yazdım 

ama bu koddan farklı olarak 2 tıklmada .menu ye değilde ekranın boş bir kenarına tıklandığında kapanmasını istiyorum 

Denedğim yöntemler:

  • 2. tıklama fonksiyonunda .menu yazan yere html yazdım jquery kodu çalışmadı yani hiç açılmadı onunu için bu yöntemini işe yarayıp yaramadığını bilmiyorum benim anlamadğım .menu yazında çalışıyor html yazınca niye çalışmıyor.
  • Animate yerine slidTogle denedim bu seferde sağa kayma animasyonu veremedim.

Ben size yapmak istediğimi anlatayım isterseniz siz yeni kod hazırlayın.

Menu divine tıklayınca ekranın sağ tarafından animasyonlu olarak yani kayarak menü açılsın ve ekranın her hangi bir yerine tıklayınca sağ tarafa kayarak kapansın istiyorum buna uygun bir kod yazarsanız çok sevinirim ve yardımcı olan ve olmak isteyen herkeze şimdiden teşekkür ederim.

<script type='text/javascript'>
 $(document).ready(function(){
		$(".menu").click(function(){
			$("#css-menu").animate({"right":"0"});
		  });
		});  

 $(document).ready(function(){
$(".menu").click(function(){
			$("#css-menu").animate({"right":"-350px"});
});
		});  
  </script>

 

jquery ilk göster ikinci gizle

demsinasbey 7 yıl önce

@alattin, @temmuz, @candan, @ismailsarp, @murat

murat 7 yıl önce

burada farklı bilgi ve tecrübeye sahip kişiler var. Hızlı cevap alabilmek adına programlama bilgisi olmayan kişilere de bildirim yollamak saece rahatsızlık verir.

demsinasbey 7 yıl önce

Kusura bakma abi birdaha olmaz ben blogda okuyunca ilk sorumda denemek istedim ama bir daha olmaz tekrardan özür dilerim.

temmuz 7 yıl önce

Mesela ben, programlamanın P'sini bile bilmiyorum @demsinasbey , maalesef :) @murat

demsinasbey 7 yıl önce

Tekrardan özür dilerim birdaha olmayacak.,

demsinasbey 7 yıl önce

Peki bu sitede kodlamadan anlayan bir arkadaş varmı ona bildirim yollayayım @temmuz

temmuz 7 yıl önce

Üstte yazdıkların içerisinde biri (bir ihtimal ikisi) var ve zaten en iyi anlayanda odur. Seni duyacaktır, acele etme :) @demsinasbey

demsinasbey 7 yıl önce

Acele ettğimden değilde merak ettiğimden diyelim çünkü bu gün okumadığım jquery makalesi kalmadı ve iyi yanı artık ufak tefek jquery kodları yazıyorum :) bir tek bu yapmak istediğimi yapamadım.

Toplam 2 cevap

demsinasbey (69) 7 yıl önce cevapladı

En sonunda gerekli kodu buldum :)

Aşağıdaki kodu yazınca tam istediğim gibi oluyor. belki birinin işine yarar onun için nasıl yapıldığını anlatmak isityorum.

  •  $('.menu').click(function(){ ----normalde böyle yazdığımız kodun sonuna e harfini ekliyoruz aynen aşağıda yaptığım gibi
  •  $('.menu').click(function(e){

bundan sonra kodun çalışmasını istediğimiz yere kadar geliyoruz şu kodu ekliyoruz

  • e.stopPropagation(); ---burda dikkat etmemiz gereken yer bu kod e harfini atadığımız fonksiyonun içinde olmalı zaten en altta örneği var ona bakktığınız zaman ne demek istediğimi anlarsınız.

Burdaki mantık ilk tıkladığımızda jquery döngüsü e.stopPropagation(); koduna gelene kadar çalışıp bu koda gelince duruyor ikinci tıkladığımz zaman ise jquery döngüsü devam ediyor ve döngü tamamlanıyor.

 

(Yukarda neden html yazınca hata veriyor sorusuna cevap vermek için biraz düşünmem yeterliymiş çünkü .menu html'in içinde bulunduğu için .menu ye tıkladığım zaman html'ede tıklamış oluyorum :D ve menü açılmadan kapanıyor.) 

<script type='text/javascript'>
    $(document).ready(function() {
         $('.menu').click(function(e){
           $("#cssmenu").css({right:"0px"});
 			e.stopPropagation();
         });   
 
   		 $("html").click(function(){
           $("#cssmenu").css({right:"-340px"});
         });       
});

</script>

 

alattin (17127) 7 yıl önce cevapladı

Bu tür bir kod işini görür mü?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div id="menu" style="display:none;height:300px;width:200px; background:#ff0000">
        <ul>
            <li>Link</li>
            <li>link</li>
        </ul>
    </div>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script type='text/javascript'>
        $(document).ready(function () {
            $(document).click(function () {               
                $("#menu").toggle("slow");
            });
        });
     
    </script>
</body>
</html>

 

demsinasbey 7 yıl önce

Hocam malesef olmadı size yapmak isteğimi şöyle anlatayım bu siteyi küçültünce göreceksiniz bir tuş ortaya çıkıyor ona tıkyınca menü açılıyor boş bir yere tıklayınca kapanıyor tam yapmak istediğim bu sitedeki gibi. genede çok teşekkür ederim zaman ayırıp yazdığınız için umarım yapmak istediğimi anlamışsınızdır çünkü ne kadar jquery makalesi okuduysam bu yapmak isteğim şeyin kodunu bulamadım normalde en fazla 10. makalede isteğim kodu buluyordum.