如何让我的下拉菜单保持下拉状态？答案

【问题标题】：How do I make my drop down remain dropped down?如何让我的下拉菜单保持下拉状态？
【发布时间】：2010-12-23 01:21:36
【问题描述】：

我目前正在处理的网站位于： http://counterbeing.com

我要解决的问题是，当您将鼠标悬停在“类别”按钮上时，子菜单项会弹出，然后在您单击之前消失。

我尝试了很多方法。一方面，我试图将包含子菜单项的 div 定义为也会触发动画的东西，但这似乎不起作用......

这是我用来抓取两个图层的 javascript 文件。我把它分成两层，因为其中一层有点透明。

$(document).ready(function() {
($("div#CategoriesLink")||$("div#CategoryButtonHolder")).hover(function(){
    $("div#navdrop").animate({
        top: "0px"
    })
    $("div#CategoryButtonHolder").animate({
        top: "0px"
    })
}); 
$("div#CategoriesLink").mouseout(function(){        

    $("div#navdrop").animate({
        top: "-162px"
    })
    $("div#CategoryButtonHolder").animate({
        top: "-162px"
    })
});
});

【问题讨论】：

标签： javascript jquery wordpress drop-down-menu

【解决方案1】：

所以，首先，如果您在 CategoryButtonHolder 上使用 rgba 背景，则不需要使用两个 div。

接下来，您将使用 mouseout 事件处理程序来为 div 设置动画。因此，每次鼠标离开按钮时，都会激活 mouseout。尝试将 mouseout 处理程序移动到 CategoryButtonHolder。

$("#CategoryButtonHolder").mouseout(function(){
   $(this).animate({
       top: '-'+$(this).outerHeight()
   });
)};

【讨论】：

我将硬编码的“top”值换成了元素的高度。它总是会完全隐藏它，但您不必在每次维度更改时都更新 javascript。
我真的很喜欢你选择不硬编码的方式。我也将尝试实现您建议的 RGBa 背景颜色...
太棒了。让我知道结果如何。
结果非常好。我没有完全听从你的建议，但我知道你在做什么。但它现在正在工作！我发现的另一件主要事情是我需要使用 .mouseleave 事件而不是 mouseout。当您滚动到我正在放置的 div 中的按钮时，Mouseout 折叠了我的下拉菜单，doh！

【解决方案2】：

hoverintent 插件是一个很好的解决此类问题的插件：http://cherne.net/brian/resources/jquery.hoverIntent.html;你可以让它等待并保持 X 毫秒的时间，然后它真的很流畅。

HTH。

【讨论】：