如何讓我的Jittery DropDown菜單穩定？

我試圖創建一個下拉菜單，當用戶懸停在他的用戶名上方時出現。如何讓我的Jittery DropDown菜單穩定？

東西幾乎所有的網站都有... 它的工作原理，但當我懸停在下拉菜單上時，它抖動了一秒鐘。爲什麼會發生這種情況，我該如何阻止它？

這裏是我的FIDDLE

這裏是我的代碼 HTML

<a id="dnn_dnnUser_registerLink" title="Visit My Profile" class="UserLink" href="#">Test Account</a> 

<ul id="account-dropdown" style="display: none;"> 
    <li>My Account</li> 
    <li>My Orders</li> 
    <li>Logout</li> 
</ul>

jQuery的

$("#dnn_dnnUser_registerLink, #account-dropdown").hover(

function() { 
    $("#account-dropdown").slideDown(100); 
}, function() { 
    $("#account-dropdown").slideUp(100); 
});

CSS

#account-dropdown { 
    width:120px; 
    display: none; 
    background-color:#0A3151; 
    opacity:0.8; 
    position:absolute; 
    z-index:9999; 
} 
#account-dropdown li { 
    list-style:none; 
}

來源

2014-05-02 MarsOne

那撥弄傷害了我的眼睛。 –

您可以檢查SE E是否目標時，鼠標移出是#dnn_dnnUser_registerLink與否，如果沒有則向上滑動隱藏下拉：

$("#dnn_dnnUser_registerLink, #account-dropdown").hover(function (e) { 
    $("#account-dropdown").slideDown(100); 
}, function (e) { 
    if (!$(e.target).is('#dnn_dnnUser_registerLink')) { 
     $("#account-dropdown").slideUp(100); 
    } 
});

Updated Fiddle

來源

2014-05-02 10:29:39 Felix

您可以添加一個stop（）

function() { 
    $("#account-dropdown").stop().slideDown(100); 
}, function() { 
    $("#account-dropdown").stop().slideUp(100); 
});

這停止目前發生的任何動畫，更新小提琴http://jsfiddle.net/gec6G/4/

來源

2014-05-02 10:30:55

我會把我nu和它在相同父母div上的選項（根據需要帶有一些clearfix），並在那裏放置處理程序。

來源

2014-05-02 10:43:41 TurboHz

事件附加到錨和下拉。

變化 - $("#dnn_dnnUser_registerLink, #account-dropdown").hover

要 - $("#dnn_dnnUser_registerLink").hover

來源

2016-08-02 22:47:14 rob

如何讓我的Jittery DropDown菜單穩定？

回答

相關問題