onay

2011-10-11 22 views
5

benim sorunum takip ediyor mouseLeave: Ben bir tetikleyici (a) ve bir pop-up (div) var. Divan, çapanın içinde yuvalanmış.onay

  • Üzerine geldiğimde, div'in görünmesini istiyorum.
  • Birinden div'a gittiğimde, görünür kalmasını istiyorum.
  • Boşluktan ayrıldığımda kapanmasını istiyorum. Ben üzerinde gezdirin ve div girmeden ayrıldığınızda
  • , ben div kapatmak istiyorum.

Ben de bunu anladım, ama şimdi hayır zorunluluğu ile boğuşuyorum. 2. Mouseleave'yi kontrol ederken, div üzerinde mouseenter olup olmadığını kontrol ediyorum. Öyleyse, mouseleave iptal etmek istiyorum. Eğer değilse, div'u kapatmak istiyorum.

Neyi yanlış yapıyorum? Bunu yapmak için doğru yol bu mu? İşte

<a href="#" class="popup_toggle" style='display:block;width:50px;height:50px;border:1px solid red;position:relative;'>Toggle</a> 
<div class="popup_div" style='position:absolute;top:50px;left:0px;border:1px solid blue;display:none;'>Popup</div> 

jQuery var:

İşte biçimlendirme var

$('.popup_toggle').mouseenter(function() { 
     var element = $(this).next('.popup_div'); 
     $.data(this, 'timer', setTimeout(function() { 
      element.show(100); 
     }, 500)); 
    }); 

    $('.popup_toggle').mouseleave(function() { 
     clearTimeout($.data(this, 'timer')); 
      if($('.popup_div').mouseenter==true) 
      { 
       return false; 
      } 
      else 
      { 
       $('.popup_div').hide(100) 
      }; 
    }); 

cevap

2

oldukça basittir. Tetikleyiciye girerken, paneli (katman, açılır pencere, her neyse) tanımlayın, .data() öğesini kullanarak referansı kaydedin ve olay işleyicileri, ilgili hedeflerin tetikleyici (panel görünümünden) veya panel olup olmadığını kontrol edin (tetikleyici görünümünden). Beraber bir şey attım. Hızlı cevap için ... Bu nasıl çalıştığını görmek için http://jsfiddle.net/rodneyrehm/X5uRD/

+0

Cevabınız ve bir örnek oluşturduğunuz için teşekkür ederiz! Ama baktıktan sonra bile, orada ne yaptığınız hakkında hiçbir fikrim yok. JQuery'de ya da genel olarak programlamada daha önce hiç deneyime sahip olmadığımı itiraf etmeliyim ve onunla çalışırken problemler ortaya çıkması halinde kendi kodumu koruyabilmem gerekiyor. İlk cevabın neden hatalı kodlandığını söyleyemem ama şu an bu yaklaşıma gidiyorum çünkü aslında bunu anlayabiliyorum :) – chabuya

1

büyük olasılıkla çalışmayacaktır Yani ... hayır. Ben popup'ların gizlemek yok, siz de size <div> elemanı bir mouseenter ve mouseleave geri arama eklemenizi öneririz ve onları genel değişken doğruysa" onların olayları, yani nasıl işleneceğini diğer geri aramalar söyler global bir değişkeni ayarlamak zorunda kalacak mouseleave, aksi halde açılır pencereyi "veya bunun gibi bir şey.

diğer yaklaşım mouseleave geri arama açılır penceresini gizlemek çalıştığında fare açılır içeride olup olmadığını kontrol etmek olacaktır. Bu, değerinden çok daha fazla iş olabilir.

+0

Teşekkür konsol günlüğüne göz at, ben küresel değişkenler ve yeni bir zamanlayıcı ile denedim ve bir cazibe gibi çalışıyor! Global değişkenleri önermek ve event.relatedTarget notu atmamak için – chabuya

+0

-1. Afedersiniz. – rodneyrehm

+0

İyi ... relatedTarget sadece bağlantıyı terk ederken açılır pencereye gireceksen işe yarar, değil mi?Axtavt açık bir şekilde pop-up'ın ** bağlantının bir parçası olmadığını açıkça belirttiği için doğrudan komşular olduklarını varsaymaktan kaçındım. –

1

Ben senin uygulaması ile sorun div üzerinde mouseentera itibaren mouseleave kısa bir süre sonra ateş edeceği oluşuna bağlıyor. Eğer .popup_toggle olay ve .popup_div olay hem aynı zamanlayıcı erişmek emin olmak gerekecek

$('.popup_toggle').mouseenter(function() { 
    // Clear any pending "hide" timer 
    // Set a show timer 
}); 

$('.popup_toggle').mouseleave(function() { 
    // Clear any pending "show" timer 
    // Set a hide timer 
}); 

$('.popup_div').mouseenter(function() { 
    // Clear any pending "hide" timer 
}); 

Not:

Bu, böyle bir şey verecekti. Bu konuda yardımcı olmak için Ben Alman'ın doTimeout plugin'u kullanmayı düşünebilirsiniz. Bu (genellikle), setTimeout/clearTimeout ile elle çalışmaktan çok daha açık bir kodla sonuçlanır. Eğer yapmaya çalıştığını ne