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用於非嵌套菜單內容

回答

相關問題