javascript - 如何让我的下拉菜单保持下拉状态？

Question

我当前工作的站点位于: 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"
    })
});
});

Answer 1

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

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

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