jquery - 在 mouseenter 上显示子菜单但在悬停时消失

Question

真的想不出更合适的标题，非常欢迎您更改它。

我有一个固定的左导航栏。当用户将鼠标悬停在该列中的一个导航项上时，我想在该列的右侧显示一个子菜单。我的问题是，当用户将光标移到新的子菜单元素时，它会消失。

这是我目前所处的位置，但不确定解决此问题的最佳方法。

My project's fiddle

如果您将鼠标悬停在我的一个导航项上超过 1750 毫秒，您会看到我的子菜单出现 - 但如果您将鼠标悬停在它上面它就会消失!我如何让它留在那里？这几乎就像我需要在悬停子菜单时取消 mouseleave 功能......但不确定......

我的 CSS 代码:

.page-wrapper {
    width:100%;
    height:100%;
}
.nav {
    position:fixed;
    height:100%;
    left:0;
    top:0;
    width:175px;
    background:#111;
    padding:20px 0;
}
.nav-item {
    height:40px;
    line-height:40px;
    padding:0 20px;
    color:#FFF;
    font-size:13px;
    cursor:pointer;
}
.nav-item:hover {
    background:#222;
}
.submenu {
    display:none;
    position:fixed;
    left:175px;
    top:0;
    width:175px;
    height:100%;
    background:#999;
}

我的 jQuery 代码:

var sub_menu_timer;
$('.nav-item').on({
    mouseenter:function() {
        sub_menu_timer = setTimeout(function() {
            $('.submenu').show();
        },1750)
    },
    mouseleave:function() {
        clearTimeout(sub_menu_timer);
        $('.submenu').hide();
    }
})

我的 HTML 代码:

<div class="page-wrapper">
    <div class="submenu"></div>
    <div class="nav">
        <div class="nav-item">
            ITEM 1
        </div>
        <div class="nav-item">
            ITEM 2
        </div>
        <div class="nav-item">
            ITEM 3
        </div>
    </div>
</div>

Answer 1

就这么简单

$('.nav-item, .submenu').on({
    mouseenter: function () {
        $('.submenu').show();
    },
    mouseleave: function () {
        $('.submenu').hide();
    }
});

参见 demo

---

更新:

如果你想保持超时，你需要像这样单独定义函数 -

var sub_menu_timer;
$('.nav-item').on({
    mouseenter: function () {
        sub_menu_timer = setTimeout(function () {
            $('.submenu').show();
        }, 1750)
    },
    mouseleave: function () {
        clearTimeout(sub_menu_timer);
        $('.submenu').hide();
    }
});


$('.submenu').on({
    mouseenter: function () {
        $('.submenu').show();
    },
    mouseleave: function () {
        $('.submenu').hide();
    }
});

如图所示here ，但是现在当您从 submenu 移出到 nav-item 时，子菜单会消失并在超时后出现。