使用相关悬停构建悬停导航系统？

发布于 2024-12-04 22:55:02 字数 1013 浏览 5 评论 0原文

嘿，堆栈溢出人员，

在使用 jquery 构建自定义下拉导航系统时似乎总是会出现一个快速问题。现在，下拉菜单的理想情况是将父项和子项放在

标签中，但有时网站的设计不允许这样做。

假设您有一个包含主导航项的 DIV，下面的另一个包含子菜单。

当您将鼠标悬停在父菜单上时，子菜单会出现，但是当它们是单独的时，卷展状态会变得很棘手。所以我嵌套了悬停来尝试解决这个问题，这一切都差不多。

$("div.primary-nav").mouseenter(function () {

    清除超时($(this).data('timeoutId'));
    $("div.doormat-nav-wrapper").slideDown("慢");

}).mouseleave(函数() {

    $("div.doormat-nav-wrapper").mouseenter(function () {
        清除超时($(this).data('timeoutId'));
        $("div.doormat-nav-wrapper").slideDown("慢");
    }).mouseleave(函数() {
        var 某个元素 = this;
        var timeoutId = setTimeout(function(){ 
        $("div.doormat-nav-wrapper").slideUp("慢");
        $(someelement).data('timeoutId', timeoutId); //设置timeoutId，允许我们在鼠标返回时清除此触发器
        });
    });     

});

从逻辑上讲，我想要实现的是

当用户滚动到 div.primary-nav .... div.doormat-nav-wrapper 显示...当滚动主导航时 div.doormat-nav-wrapper 隐藏除非 div.doormat-nav-包装器本身正在悬停。

如有任何反馈或建议，我们将不胜感激。谢谢！

原文

Hey there stack overflow crew,

Quick question that always seems to come up when building custom drop down navigation systems using jquery. Now the ideal scenario for drop down menus would be to have the parent and children in

tags however sometimes the design of the site does not allow this.

Let's say you have a DIV containing your primary navigation items and another below containing your child menus.

When you rollover the parent the child menu appears however when these are seperate 's the rollout state get's tricky. So I nested the hovers to try and get around this and it alllmost works.

$("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
        });
    });     

});

Logically what I'm trying to achieve is

When the user rolls over the div.primary-nav .... div.doormat-nav-wrapper shows... when rolling off the primary nav div.doormat-nav-wrapper hides UNLESS div.doormat-nav-wrapper itself is being hovered on.

Any feedback or suggestions would be greatly appreciated. THANKS!

分享到QQ

分享到微博