JQery açılırlığı, vurgunun üzerinde reddedildi

Tipik bir navbar oluşturdum ve bir öğenin üzerine geldiğinizde ("Takımlarımız") bir açılır menü belirir (aşağıdaki jquery'i kullanarak):

$("li#menu-item-20").hover(function(){
            $("#dropdown").stop().fadeIn(500);
        }, function(){
            $("#dropdown").stop().fadeOut(500);
        });

Daha sonra açılır menünün üzerine geldiğinizde ( #dropdown ) açılan menü geri çekilir (menü öğesinin üzerine geldiğim için). Çalışması için jQuery'ye ihtiyacım var. açılır menüyü ve nav menüsünü kapattıktan sonra söner.

Any ideas? You can see a working example at http://pixelcakecreative.com/cimlife/

1

1 cevap

#dropdown öğesine mouseleave olayını bağlarsanız, açılır menü kullanıcı açılır pencereyi kapana kadar ekranda kalır:

//Note: no need for the `li` here as there will only be 1 element with this id on the document
$('#menu-item-20').bind('mouseenter', function() {
    $("#dropdown").stop(true, true).fadeIn(500);
});
$('#menu-nav').children('.menu-item').not('#menu-item-20').bind('mouseenter', function() {
    $("#dropdown").stop(true, true).fadeOut(500);
});
$('#dropdown').bind('mouseleave', function() {
    $("#dropdown").stop(true, true).fadeOut(500);
});

Here is a jsfiddle of the above solution: http://jsfiddle.net/jasper/kED9T/2/

0
katma
teşekkürler bu harika bir çözüm
katma yazar JCHASE11, kaynak
Bununla ilgili tek sorun, açılır listenin üzerine gelip ardından farklı bir gezinme öğesinin üzerine geldiğinizde, açılır listenin devam etmesidir.
katma yazar JCHASE11, kaynak
TEŞEKKÜRLER!!! bu çok yardımcı oldu
katma yazar JCHASE11, kaynak
Yanıtı ve jsfiddle'ı diğer .menu öğelerini fare-overing için bir olay işleyicisi içerecek şekilde güncelledim.
katma yazar Jasper, kaynak