jquery mouseover 向下滑动 mouseout 向上滑动

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

但是如果我在鼠标悬停时使用它，它会同时开始上下跳跃

    <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

您应该留在元素的 scope 中（通过使用 $(this)）。

尝试这样的事情：

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