Question

我正在尝试创建一个下拉菜单，当用户将鼠标悬停在其UserName上方时，该菜单会显示。

几乎所有网站都有的东西...... 它可以工作，但当我将鼠标悬停在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;
}

Answer 1

您可以检查鼠标移出时的目标是否为#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

Answer 2

您可以添加一个停止（）

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

这会停止当前正在发生的任何动画，更新小提琴http://jsfiddle.net/gec6G/4/

Answer 3

我将菜单及其选项放在同一个父div上（根据需要使用一些clearfix），然后将转出处理程序放在那里。

Answer 4

事件附加到锚点和下拉列表。

更改 - "cpu_usage" : { "percpu_usage" : [ 8646879, 24472255, 36438778, 30657443 ],

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

如何使我的Jittery DropDown菜单稳定？

4 个答案: