jquery show hide在列表中工作不正常

Question

我正在使用show和hide函數來顯示列表中的菜單項。他們在盤旋時上下滑動。

問題是，當列表項擴展時，菜單的整體背景也會展開，但是當它收縮時背景也會收縮，並且如果您嘗試去展開菜單下的某個項目，它會一次隱藏超出了菜單的界限。

通過將第二個列表項目和第三個列表項目之後的鼠標懸停，可以看到此行爲。

只是懸停在新澤西商店，而不是盤旋紐約商店，你會看到一個像它倒塌一樣的異常行爲。即它不正確地顯示在第三列表和結果顯示第一

這裏是一個小提琴 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)")