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

【问题标题】：Trying to keep slid div open with SlideDown/Up尝试使用 SlideDown/Up 保持滑动 div 打开
【发布时间】：2010-07-21 06:41:03
【问题描述】：

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

我最初隐藏内容区域，然后当我将鼠标悬停在标题上时调用 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 像素，它仍然会向上滑动内容。

演示：here

【问题讨论】：

我的 20px 问题是由我以前不知道的不同 z-indexed div 引起的。

标签： jquery jquery-ui

【解决方案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 元素时，您正在清除该队列，所以没有滑动时机成熟时起来，除非你在这两个元素之外。

【讨论】：