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位置方式），但是hoverIntent不起作用。

当我的菜单内容没有嵌套在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并且它工作正常（弹出窗口中的所有东西都是一个孩子悬停元素）：

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

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

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

JQuery HoverIntent用于非嵌套菜单内容

1 个答案: