jquery mouseover向下滑动鼠标向上滑动

Question

我对我的菜单做了滑动效果。

，但我不能做，如果在鼠标滑过来，滑出了试图与这

$('nav.main_menu li').mouseover(function() { 
    $('nav.main_menu li:hover ul.sub-menu').slideDown(); 
}); 

要么

$(document).ready(function(){ 
    $("nav.main_menu li").hover(function() { 
     $("nav.main_menu li:hover ul.sub-menu").slideDown(500); 
    }, function() { 
     $("nav.main_menu li:hover ul.sub-menu").slideUp(300); 
    }); 
    }); 

，但如果我用这个鼠标悬停它开始Jum的并在同一时间下降

<nav class="main_menu"> 
        <ul> 

         <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item menu-item-31"><a href="http://www.emotion-online.hu/levente/honti/">Főoldal</a></li> 
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="http://www.emotion-online.hu/levente/honti/akciok/">Akciók</a> 
<ul class="sub-menu"> 
    <li id="menu-item-164" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-164"><a href="http://www.emotion-online.hu/levente/honti/akciok/kiemelt-ajanlat/">Kiemelt ajánlat</a></li> 
    <li id="menu-item-167" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-167"><a href="http://www.emotion-online.hu/levente/honti/akciok/allando-kedvezmenyek/">Állandó kedvezmények</a></li> 
</ul> 
</li> 
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://www.emotion-online.hu/levente/honti/hirek/">Hírek</a></li> 
<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://www.emotion-online.hu/levente/honti/termekek/">Termékek</a></li> 

<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="http://www.emotion-online.hu/levente/honti/szolgaltatasok/">Szolgáltatások</a> 
<ul class="sub-menu"> 
    <li id="menu-item-195" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-195"><a href="http://www.emotion-online.hu/levente/honti/szolgaltatasok/szemeszeti-szurovizsgalat/">Szemészeti szűrővizsgálat</a></li> 
    <li id="menu-item-191" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-191"><a href="http://www.emotion-online.hu/levente/honti/szolgaltatasok/komputeres-szemvizsgalat/">Komputeres szemvizsgálat</a></li> 
    <li id="menu-item-190" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-190"><a href="http://www.emotion-online.hu/levente/honti/szolgaltatasok/kontaktlencse-illesztes/">Kontaktlencse illesztés</a></li> 
    <li id="menu-item-189" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-189"><a href="http://www.emotion-online.hu/levente/honti/szolgaltatasok/garanciak/">Garanciák</a></li> 
    <li id="menu-item-188" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-188"><a href="http://www.emotion-online.hu/levente/honti/szolgaltatasok/3d-s-szemuveglencse-illesztes/">3D-s szemüveglencse illesztés</a></li> 

    <li id="menu-item-187" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-187"><a href="http://www.emotion-online.hu/levente/honti/szolgaltatasok/szemuveg-javitas-tisztitas/">Szemüveg javítás, tisztítás</a></li> 
    <li id="menu-item-186" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-186"><a href="http://www.emotion-online.hu/levente/honti/szolgaltatasok/ingyenes-uv-teszt/">Ingyenes UV teszt</a></li> 
    <li id="menu-item-185" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-185"><a href="http://www.emotion-online.hu/levente/honti/szolgaltatasok/ceges-szures/">Céges szűrés</a></li> 
</ul> 
</li> 
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="http://www.emotion-online.hu/levente/honti/dijak/">gy.i.k</a></li> 
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="http://www.emotion-online.hu/levente/honti/videok/">Videók</a></li> 
<li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a href="http://www.emotion-online.hu/levente/honti/galeria/">Galéria</a></li> 

<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="http://www.emotion-online.hu/levente/honti/rolunk/">Rólunk</a></li> 

        </ul> 
       </nav> 

什么即时消失？

Answer 1

你应该留在你的元素的范围内（通过使用$（this））。

尝试是这样的：

$(document).ready(function(){ 
    $("nav.main_menu li").hover(function(){ 
     $(this).children("ul").slideDown(500); 
    },function(){ 
    $(this).children("ul").slideUp(300);  
    }); 
});