Nie można zsunąć rozwijanego menu jQuery

Question

Robię stronę dla kogoś i jestem całkiem nowy w jQuery (co prawdopodobnie nie pomaga). Strona potrzebowała menu rozwijanego, aby wyświetlić linki do galerii na liście, a nie wszystkie na pasku nawigacyjnym. Problem polega na tym, że za każdym razem, gdy umieszczam kursor nad elementem li, menu rozwijane ześlizguje się w dół, ale gdy umieściłem kursor nad rozwijanym menu, przesuwa się ono z powrotem.

$(document).ready(function() { 
    $("li#navi-dropdown").hover(
    function() { 
     $('ul.nav-dropdown').slideDown('medium'); 
    }, 
    function() { 
     $('ul.nav-dropdown').slideUp('medium'); 
    } 
); 
}); 

Prawdopodobnie coś prostego, ale pomoc jest mile widziana. JSFiddle poniżej.

http://jsfiddle.net/6e87Lwkb/

Answer 1

rozważyć oddanie ul podmenu wewnątrz li, i przesunąć go. Nie zapomnij użyć .Zatrzymaj() też, tak jak jQuery nie kolejce animacje slajdów:

$('ul.nav-dropdown').stop().slideDown('medium'); 

See your updated fiddle here

Answer 2

Jesteś toggeling zdarzenia w przewodnika mnie, trzeba to zrobić:

$(document).ready(function() { 
    $("li#navi-dropdown").on('mouseover',function() { 
    $('ul.nav-dropdown').slideDown('medium'); 
    }) 

    $("ul.nav-dropdown").on('mouseleave',function() { 
    $('ul.nav-dropdown').slideUp('medium'); 
    }); 
}); 

Mam również zaktualizowane skrzypce, sprawdź to teraz działa.

tu jest moje skrzypce:

http://jsfiddle.net/6e87Lwkb/7/

Answer 3

Spróbuj z tym kodem.

$(document).ready(function() { 
    $("li#navi-dropdown").hover(
    function() { 
    $('ul.nav-dropdown').slideDown('medium'); 
    }); 
    $(".nav-dropdown").mouseleave(
    function() { 
    $('ul.nav-dropdown').slideUp('medium'); 
    }); 
});