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);  
    }); 
});