用于非嵌套菜单内容的 JQuery HoverIntent

Question

我正在使用 JQuery HoverIntent 创建菜单。

这是我的 HTML 代码的基本结构：

<ul>
    <li><a href="#" class="current">Home</a></li>
    <li id="sh-zone-menu-sub-services" class="submenu"><a href="#">Services</a></li>
    <li id="sh-zone-menu-sub-support" class="submenu"><a href="#">Support</a></li>
    <li id="sh-zone-menu-sub-contact" class="submenu"><a href="#">Contact</a></li>
    <li><a href="#">About Us</a></li>
</ul>
<div id="sh-zone-menu-sub-services-target" class="submenu-content">Services Content</div>
<div id="sh-zone-menu-sub-support-target" class="submenu-content">Support Content</div>
<div id="sh-zone-menu-sub-contact-target" class="submenu-content">Contact Content</div>

这是 JQuery 代码：

var $_ = jQuery;
$_(document).ready(function(){  

    function showSubMenu()
    {
        var source_id = $_(this).attr("id");
        $_(this).addClass("showsubmenu");
        $_("#"+source_id+"-target").show();
    }

    function hideSubMenu()
    {
        var source_id = $_(this).attr("id");
        $_(this).removeClass("showsubmenu");
        $_("#"+source_id+"-target").hide();
    }

    var subMenuConfig = 
    {
        interval: 100,
        sensitivity: 4,
        over: showSubMenu,
        timeout: 300,
        out: hideSubMenu 
    };

    $_("ul li.submenu").hoverIntent(subMenuConfig);
});

一切正常，但是当菜单内容显示并且我尝试将鼠标悬停在它上面时，它消失了。

按照之前配置 HTML 代码的方式，子菜单内容 DIV 嵌套在 LI 标记内，这可以正常工作，即菜单链接和内容悬停时。然而，我在 IE 定位方面遇到了问题（因为菜单内容占据了页面的很大一部分），所以我需要将它们从 LI 标签中删除。

我现在的方式对于 IE 来说可以正常工作（CSS 位置明智），但是悬停意图不起作用。

当我的菜单内容未嵌套在 LI 标签内时，有没有办法使用hoverIntent？！

谢谢。

Answer 1

我知道您不久前发布了这个问题，并且我对hoverIntent插件的经验有限，但这是我通过查看代码所知道的。 mouseenter 和 mouseleave 事件绑定到您绑定的hoverIntent 对象。绑定到你的对象的hoverIntent中的代码是：

return this.bind('mouseenter', handleHover).bind('mouseleave', handleHover);

因此，如果你保留一个ul并绑定到li元素，就像这样：

$("ul#ReportNav li").hoverIntent(config);

弹出窗口发生后（显示来自ul的更多元素），它不会触发 mouseleave 事件您将鼠标悬停在弹出窗口上，因为弹出窗口中的所有元素都是 ul 的子元素。

所以...如果你说...一个div包装器，里面有一个div作为悬停触发器，你只想用正确的语法绑定hoverIntent并且它工作正常（弹出窗口中的所有内容都是悬停的子级） element)：

<div id="ListContainer">
<div id="ListTableContainer">
<!-- anything you want -->
</div>
</div>

$("div#ListContainer div#ListTableContainer").css({ 'opacity': '0' });
$("div#ListContainer").hoverIntent(config);

我正在寻找类似的东西并不断遇到这个问题。我以为我会回答它。