Javascript Jquery显示隐藏在列表中工作不正常

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

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

可以通过将第二个列表项和第三个列表项悬停在一起来查看此行为

只要在新泽西州的商店里徘徊，而不是在纽约的商店里徘徊，你就会看到一种不正常的行为，就像它倒塌一样。i、 它没有正确显示第三个列表，结果显示第一个列表

这是一把小提琴

html:

css:

---

如果我理解这个问题，您可以使用：not（：animated）jquery选择器

像这样

---

如果我理解这个问题，您可以使用：not（：animated）jquery选择器

像这样

---

把你的html格式化成可读的格式而不是头疼的格式请详细说明问题是，如果你的答案可以的话，我会写一个答案@Ammar UI hassanhman formatted fiddle在这里：把你的html格式化成可读的格式而不是头疼的格式请详细说明问题是，如果你的答案可以的话，你可以回答我将在这里写下一个回答@Ammar UI Hassanhuman formed fiddle：我试过了，但没有任何改变。只要在新泽西州的商店里徘徊，而在纽约的商店里徘徊，你就会看到一种不正常的行为，就像它崩溃了一样。i、 e.它没有正确显示第三个列表和显示第一个结果的结果您使用的浏览器是什么？正如所料，“纽约商店”开张了，但清单上的商品太少，鼠标停留在底部，然后打开“北卡罗来纳州商店”。对我来说，这听起来像是设计上的问题。我试过了，但没有任何改变。只要在新泽西州的商店里徘徊，而不是在纽约的商店里徘徊，你就会看到一种不正常的行为，比如它倒塌了。i、 e.它没有正确显示第三个列表和显示第一个结果的结果您使用的浏览器是什么？正如所料，“纽约商店”开张了，但清单上的商品太少，鼠标停留在底部，然后打开“北卡罗来纳州商店”。这听起来像是我的设计问题。

<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>

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

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

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

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