使jQuery子菜單展開父項並防止重複slideToggle效應

我已經放在一起展開懸停子菜單的導航欄。看我的jsFiddle。使jQuery子菜單展開父項並防止重複slideToggle效應

如果您將鼠標懸停在菜單項上，子菜單將擴展到父母<nav>（我已將其着色爲藍色）。我所追求的是藍色<nav>元素與子<ul>一起擴大。

我不知道我是否需要jQuery或css解決方案，但迄今爲止我嘗試過的所有方法都是徒勞的。

和

如果你的鼠標是跨導航快速盤旋，從「MENU 3」說「MENU 1」，然後在子菜單項，如「一個」（REST實際上出現之前，），jQuery陷入了每個子菜單打開和關閉的重複循環。

什麼需要改變，以防止這種情況發生？

來源

2012-06-21 Shayne Lighty

在$（this）.find（'ul'）後添加stop（），這應該有助於動畫。

$(document).ready(

function() { 
    $('.menu li ul').hide(); 
    $('.menu li').hover(function(e) { 
     $(this).find('ul').stop().slideToggle("slow"); 
    }); 
});

而原因菜單不展開的是您的「.menu李ul」被設置爲絕對位置。當元素具有絕對位置時，它將從正常流程中移除

來源

2012-06-21 09:10:10 Ivan

謝謝@Ivan，這完美地工作，正是我在後。給任何遇到同樣問題的人提供一個說明......這個修復最初並不適用於我，它弄亂了子菜單的定位。只有當我意識到我正在運行舊版本的jQuery（1.5）並更新到最新的解決方案。 –

...這個定位現在你已經說過了。我能想到的唯一方法就是爲每個子菜單設置一個不同的類，併爲每個子菜單定位相對位置。除非有更簡單的方法，否則我會試試 –

發生這種情況的原因是動畫排隊，並且它們將繼續運行，除非您強制停止它們。

JQuery's stop()函數會幫助你在這裏。

stop(clearQueue, jumpToEnd) - 停止匹配元素上當前運行的動畫。

$(this).find('ul').stop(true, true).slideToggle("slow");

檢查更新小提琴：http://jsfiddle.net/aQBeZ/9/

來源

2012-06-21 09:10:32 Asif

使jQuery子菜單展開父項並防止重複slideToggle效應

回答

相關問題