javascript - Jquery 显示隐藏在列表中无法正常工作

Question

我正在使用显示和隐藏功能来显示列表中的菜单项。它们在悬停时上下滑动。

问题是，当列表项展开时，菜单的整体背景也会展开，但是当它收缩时，背景也会收缩，如果您尝试转到展开的菜单下方的元素，它会立即隐藏超出菜单边界。

通过将鼠标悬停在第二个列表项和其后的第三个列表项上可以看到此行为。

只需将鼠标悬停在新泽西州商店上，然后将鼠标悬停在纽约商店上，您就会看到异常行为，例如崩溃。即它没有正确显示第三个列表，结果显示第一个

这是一个 fiddle Fiddle

html:

<div class="mega-col col-xs-12 col-sm-12 col-md-4" data-type="menu"><div class="mega-col-inner"><ul><li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href=""><span class="menu-title">Massachusetts Stores</span><b class="caret"></b></a><div class="dropdown-mega level2"><div class="dropdown-menu-inner"><div class="row"><div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu"><div class="mega-col-inner"><ul><li class=" "><a href="index.php?route=common/location_details&amp;loc_id=24"><span class="menu-title">Burlington Mall, MA</span></a></li><li class=" "><a href="index.php?route=common/location_details&amp;loc_id=25"><span class="menu-title">Burlington Mall, MA - Cart</span></a></li></ul></div></div></div></div></div></li><li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href=""><span class="menu-title">New Jersey Stores</span><b class="caret"></b></a><div class="dropdown-mega level2"><div class="dropdown-menu-inner"><div class="row"><div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu"><div class="mega-col-inner"><ul><li class=" "><a href="index.php?route=common/location_details&amp;loc_id=26"><span class="menu-title">Brunswick Square Mall, NJ</span></a></li><li class=" "><a href="index.php?route=common/location_details&amp;loc_id=30"><span class="menu-title">Garden State Plaza, NJ</span></a></li><li class=" "><a href="index.php?route=common/location_details&amp;loc_id=27"><span class="menu-title">Menlo Park Mall, NJ</span></a></li><li class=" "><a href="index.php?route=common/location_details&amp;loc_id=29"><span class="menu-title">Ocean County Mall, NJ</span></a></li><li class=" "><a href=""><span class="menu-title">Rockaway Townsquare, NJ</span></a></li></ul></div></div></div></div></div></li><li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href=""><span class="menu-title">New York Stores</span><b class="caret"></b></a><div class="dropdown-mega level2"><div class="dropdown-menu-inner"><div class="row"><div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu"><div class="mega-col-inner"><ul><li class=" "><a href="index.php?route=common/location_details&amp;loc_id=31"><span class="menu-title">Galleria at White Plains, NY</span></a></li><li class=" "><a href="index.php?route=common/location_details&amp;loc_id=42"><span class="menu-title">Manhattan, NY-Toys 'R' Us </span></a></li></ul></div></div></div></div></div></li><li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href=""><span class="menu-title">North Carolina Stores</span><b class="caret"></b></a><div class="dropdown-mega level2"><div class="dropdown-menu-inner"><div class="row"><div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu"><div class="mega-col-inner"><ul><li class=" "><a href="index.php?route=common/location_details&amp;loc_id=32"><span class="menu-title">CrabTree Valley, NC</span></a></li><li class=" "><a href="index.php?route=common/location_details&amp;loc_id=2"><span class="menu-title">Fayetteville, NC</span></a></li></ul></div></div></div></div></div></li></ul></div></div>

js:

$(".parent.dropdown-submenu.mega-group").hover(
  function() {
     $(this).children('.dropdown-mega.level2').show("500");
  },
  function(){
     $(this).children('.dropdown-mega.level2').hide("500");
  });

CSS:

li.parent.dropdown-submenu.mega-group .dropdown-mega.level2 {
    display: none;
}

li {
    padding:10px;
    position: relative;
    margin:auto;
}

Answer 1

如果我理解这个问题，你可以使用 :not(:animated) jquery 选择器。

像这样jsfiddle .

$(".parent.dropdown-submenu.mega-group:not(:animated)")