使用依赖悬停构建悬停导航系统

Question

嘿，堆栈溢出人员，

在使用jquery构建自定义下拉导航系统时似乎总是出现的快速问题。现在，下拉菜单的理想情况是在

标签中有父节点和子节点，但是有时站点的设计不允许这样做。

让我们假设你有一个DIV包含你的主要导航项和下面的另一个包含你的子菜单。

当你翻转父菜单时，子菜单就会出现，但是当它们是分开的时候，rollout状态就会变得很棘手。因此，我嵌套了悬停按钮，试图绕过这个问题，它几乎都工作。

$("div.primary-nav").mouseenter(function () {
    clearTimeout($(this).data('timeoutId'));
    $("div.doormat-nav-wrapper").slideDown("slow");
}).mouseleave(function () {
    $("div.doormat-nav-wrapper").mouseenter(function () {
        clearTimeout($(this).data('timeoutId'));
        $("div.doormat-nav-wrapper").slideDown("slow");
    }).mouseleave(function () {
        var someelement = this;
        var timeoutId = setTimeout(function(){ 
        $("div.doormat-nav-wrapper").slideUp("slow");
        $(someelement).data('timeoutId', timeoutId); //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
        });
    });     
});

逻辑上我想达到的是

当用户浏览div.primary-nav ....div.doormat-nav-wrapper显示……当滚动出主导航时，div.doormat-nav-wrapper隐藏，除非div.doormat-nav-wrapper本身被悬停。

任何反馈或建议将非常感谢。谢谢!

Answer 1

我相信这和我以前回答过的完全一样:

当mouseout