Javascript 如何使我的下拉列表保持下拉状态？

我目前工作的网站位于：

我试图解决的问题是，当你把鼠标放在“类别”按钮上时，子菜单项会弹出，但在你点击它们之前就消失了

我试过很多东西。一方面，我试图将子菜单项包装的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"
    })
});
});

---

对于hover，解决这类问题的一个不错的插件是hoverintent插件：；你可以让它等待和停留X毫秒的时间，它真的很顺利，然后

---

HTH.

因此，第一件事是，如果在CategoryButtonHolder上使用rgba背景，则不需要使用两个div

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

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

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

---

我将硬编码的“top”值替换为元素的高度。它总是会完全隐藏它，但你不必每次维度改变时都更新javascript。我真的很喜欢你选择不硬编码的方式。我还将尝试实现您建议的RGBa背景色…太好了。让我知道结果如何。结果很好。我没有完全按照你的建议去做，但我明白你的想法。但它现在起作用了！。我发现的另一个主要问题是我需要使用.mouseleave事件而不是mouseout。Mouseout把我的下拉列表折叠起来，当你翻过一个按钮时，这个按钮就在我正在放下的div中，doh！