JQuery HoverIntent用于非嵌套菜单内容

我正在使用JQuery HoverIntent创建菜单。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？

谢谢。

来源

2011-06-07 Obinwanne Hill

查看：http://www.brandammo.co.uk/blog/2011/02/simple-jquery-dropdown-menu-with-easing-and-hoverintent-navidropdown-1-0这给出了一个完整的例子。 – 2012-02-12 16:51:54

我知道你前段时间发布了这个问题，我对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-06 13:19:06

JQuery HoverIntent用于非嵌套菜单内容

回答

相关问题