jQuery mouseover向下滑动mouseout向上滑动

问题描述

| 我对菜单做了滑倒效果。 但是我不能做到，如果在鼠标上滑下来然后滑出

$(\'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>

我缺少什么？     

解决方法

        您应该留在元素的范围内（通过使用$（this））。 尝试这样的事情：

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