uzmanim.net
sorular
uzmanlar
market
canlı destek
sor
çözüm paylaş

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

0

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 demsinasbey (69)
6 yıl önce sordu

  • @alattin, @temmuz, @candan, @ismailsarp, @murat demsinasbey 6 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. murat 6 yıl önce
  • Kusura bakma abi birdaha olmaz ben blogda okuyunca ilk sorumda denemek istedim ama bir daha olmaz tekrardan özür dilerim. demsinasbey 6 yıl önce
  • Mesela ben, programlamanın P'sini bile bilmiyorum @demsinasbey , maalesef :) @murat temmuz 6 yıl önce
  • Tekrardan özür dilerim birdaha olmayacak., demsinasbey 6 yıl önce
  • Peki bu sitede kodlamadan anlayan bir arkadaş varmı ona bildirim yollayayım @temmuz demsinasbey 6 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 temmuz 6 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. demsinasbey 6 yıl önce

Toplam 2 Cevap

1

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>

 

demsinasbey demsinasbey (69)
6 yıl önce cevaplandı

    0

    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>

     

    alattin alattin (16984)
    6 yıl önce cevaplandı

    • 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. demsinasbey 6 yıl önce
    üyelik gerektirir

    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

    en iyi uzmanlar - nisan

    uzmanim.net blog

    25 Ocak 2018 uzmanim.net güncellemesi

    30 Haziran 2017 uzmanim.net güncellemesi

    26 Aralık 2016 uzmanim.net güncellemesi

    Çözümler tekrar ana sayfada

    08 Eylül 2016 uzmanim.net kural ihlali yapan kullanıcılar ve yaptırımlar