Question

我正在尝试制作一个带有动画的基本下拉菜单，并且遇到问题，我似乎无法弄清楚如何在鼠标离开之前保持下拉部分打开。是否有一种简单的方法可以告诉它保持开放状态？我知道我对.clickme mouseout函数完全没错，因为它会相应地卸载菜单。

如果有人可以在这个特定情况下提供帮助，我将非常感激。

$(document).ready(function() {

$('.clickme').mouseover(function() {
    $('#slidebox').animate({
        top: '+=160'
    }, 200, 'easeOutQuad');
});

$('.clickme').mouseout(function(){
    $('#slidebox').animate({
        top: '-=160'
    }, 200, 'easeOutQuad')
});

}）;

Answer 1

查看jquery hoverIntent

Answer 2

这样可以让您无需任何标记更改：

$('.clickme, #slidebox').hover(function() {
  $('#slidebox').stop().animate({ top: '30px' }, 200, 'easeOutQuad');
}, function() {
  $('#slidebox').stop().animate({ top: '-130px' }, 200, 'easeOutQuad');
});

由于你的元素不是父/子相关的，所以更容易在菜单上放置绝对位置（无论如何它在CSS中都有130px），所以没有理由不使用它具有绝对位置的事实。试一试，我测试了你的网站，似乎是我在菜单中想要的行为。

jQuery动画鼠标悬停/ mouseout保持下拉菜单可见

2 个答案: