jQuery Hover Intent，当间隔大于0时子菜单消失/错误

Question

我目前正在使用 jQuery Hover Intent 插件在触发菜单悬停时添加初始延迟。

HTML：

<div>
    <ul>
        <li class="link hover"><a href="#">Hover</a></li>
    </ul>
</div>

<div class="sub hover">
     <h1>Sub Section</h1>
</div>

JS：

// Vars
var timeout;

// Show Menu
function showMenu() {
    clearTimeout(timeout);
    $('.sub').fadeIn(50);
}

// Hide Menu
function hideMenu() {
    timeout = setTimeout(function () {
        $('.sub').fadeOut(50);
    }, 100);
}

// Settings
var config = {
    interval: 50, // time between reading/comparing mouse coordinates
    timeout: timeout, // time before out function is called
    over: showMenu,
    out: hideMenu
};

// Initialise Hover
$('.hover').hoverIntent(config);

在配置中，当间隔设置为 0 时，容器之间的切换工作正常。

当我将间隔设置为大于 0 时，在容器内外悬停时会出现问题（子菜单闪烁并消失）。但是我需要为初始延迟设置间隔。

JS 小提琴：http://jsfiddle.net/hfx7ucnw/4/

Answer 1

编辑 - 新答案

好的，伙计。如果您有此 html 并且您无法更改，请尝试在每次触发 mouseenter 或 over 时将其更改为 .stop(true) fadeOut 动画以防止 fadeOut。

我不知道这是否可以使用hoverIntent 插件，但您可以改用此代码：

$(".hover").on({
    "mouseenter" : function(e){
        $(".sub").stop(true);
        $(".sub").fadeIn();
    },
    "mouseleave" : function(e){
        $(".sub").delay(50).fadeOut();
    },
})

编辑 #2 - 防止意外结束

为了防止意外过度，如果用户“超过”.hover 按钮（而不是何时结束 .sub），则为淡入淡出效果添加延迟。

并且还在mouseleave 添加.stop(true) 以防止“快速移动”上的淡入：

$(".hover,.sub").on({
    "mouseenter" : function(e){
        _delay = ($(this).hasClass("hover")) ? 200 : 0 ;
        $(".sub").stop(true);
        $(".sub").delay(_delay).fadeIn();
    },
    "mouseleave" : function(e){
        $(".sub").stop(true);
        $(".sub").delay(50).fadeOut();
    },
})

使用延迟和淡入淡出时间来创造最佳性能。

示例：http://jsfiddle.net/hfx7ucnw/8/

旧答案

这是我知道的问题。

根据我的经验，我可以告诉你，创建在mouseover 上显示并在mouseleave 上显示的“下拉菜单”或“子菜单”的唯一方法是将 子元素缩进到父元素 我编辑你的小提琴向你展示我的方式。

对 CSS 和 HTML 进行一些简单的更改

http://jsfiddle.net/hfx7ucnw/5/

告诉我这条路是不是你的。

Answer 2

实际上它不会像你想象的那样工作。您为 Menu 和 Sub Menu 'hover' 提供了相同的类并且在 jQuery 中您编写了 $('.hover').hoverIntent(config);此行将在 Menu 和 Submenu 元素上初始化 hoverIntent。因此，当您使用 0 作为间隔时，一切正常，因为 HoverIntent 的 showMenu 和 hideMenu 回调都附在两个元素上。

所以最后，您必须编写自己的代码/逻辑来防止 SubMenu 隐藏。