Question

我正在构建一个菜单控件，它由标题区域和包含链接的内容区域组成。

我最初隐藏了内容区域，然后当我将鼠标悬停在标题上时调用SlideDown，当您离开标题时调用SlideUp。我的问题是，如果你已经超过它，我想保持内容区域是开放的。

<div id="header">Header</div>
<div id="content">Content</div>

$('#header').hover(FadeMenuIn, FadeMenuOut);

function FadeMenuIn(ID) {
    $('#content').stop(true, true).slideDown('slow');
}

function FadeMenuOut(ID) {
    $('#content').stop(true, true).slideUp('slow');
}

我尝试将相同的处理程序添加到#content中，但是当我从标题开始大约20 px时，它仍会将内容向上滑动。

演示：here

Answer 1

你可以通过.delay()来调用一些技巧，如下所示：

$('#header, #content').hover(FadeMenuIn, FadeMenuOut);

function FadeMenuIn(ID) {
  $('#content').stop(true, true).slideDown('slow');
}

function FadeMenuOut(ID) {
  $('#content').stop(true, true).delay(10).slideUp('slow');
}

See the updated demo here，我们正在做的是稍微延迟.slideUp()（进入队列），但当你进入#content元素时，你正在清除那个队列，所以当时间到来时没有任何东西会滑动，除非你在两个元素之外。

尝试使用SlideDown / Up保持滑动div打开

1 个答案: