JQuery dropdown verdwijnt tijdens zweven

Ik heb een typische navigatiebalk ingesteld en wanneer u met de muis over één element beweegt ("Onze teams"), verschijnt er een vervolgkeuzelijst (met behulp van de jQuery hieronder):

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

Als je dan over de vervolgkeuzelijst beweegt ( #dropdown ), verdwijnt de vervolgkeuzelijst weer terug (omdat ik van het menu-item af zweefde). Ik heb de jQuery nodig om te werken, zodat deze over de vervolgkeuzelijst kan blijven en vervagen nadat u de vervolgkeuzelijst hebt verlaten EN het nav-menu.

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

1

1 antwoord

Als u de mouseleave -gebeurtenis aan het element #dropdown koppelt, blijft de vervolgkeuzelijst staan ​​tot de gebruiker de vervolgkeuzelijst muisstopt:

//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
toegevoegd
bedankt dit is een geweldige oplossing
toegevoegd de auteur JCHASE11, de bron
het enige probleem hiermee is dat als je de muisaanwijzer boven de vervolgkeuzelijst plaatst en vervolgens op een ander nav-item blijft, de vervolgkeuzelijst blijft bestaan.
toegevoegd de auteur JCHASE11, de bron
BEDANKT!!! dit was een enorme hulp
toegevoegd de auteur JCHASE11, de bron
Ik heb het antwoord bijgewerkt en jsfiddle om een ​​gebeurtenishandler toe te voegen voor mouse-overing van de andere .menu-items .
toegevoegd de auteur Jasper, de bron