1

我正在使用 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 位置），但 hoverIntent 不起作用。

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

谢谢。

4

1 回答 1

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 并且它工作正常（弹出窗口中的所有内容都是悬停的子项元素）：

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

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

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

于 2011-08-06T13:19:06.463 回答