hoverIntent jQuery的子菜單不保持開放

懸停在在使用jQuery和hoverIntent到顯示子菜單的菜單系統的鏈路之後，如果將鼠標指針移動到子菜單，子菜單立即關閉。

詳細

我一直有與jQuery的hoverIntent插件的問題。我有一個包含子菜單的導航菜單。該子菜單在用戶懸停在指定的頂級鏈接上時打開。下面是HTML：

<ul id="Menu"> 
    <li><a href="/">Home</a></li> 
    <li><a href="news/">News</a></li> 
     <li class="hassublinks"><a href="software.php">Software & Apps</a> 
      <ul> 
       <li><a href="windows.php">Windows</a></li> 
       <li><a href="mac.php">Mac</a></li> 
       <li><a href="ios.php">iOS</a></li> 
       <li><a href="android.php">Android</a></li> 
      </ul> 
     </li> 
    <li><a href="feedback.php">Feedback</a></li> 
    <li><a href="about.php">About</a></li> 
</ul>

基本上，<ul> ID爲「菜單」中的每個<li>有網站上的鏈接的網頁，以及<li>'s的一個包含一個子（另一<ul>）有更多的聯繫。那<li>與子菜單中給它的類「hassublinks」，並仍然有一個<a>標記在其中鏈接到主軟件&應用程序頁面。但是因爲它包含子菜單，所以我還使用jQuery和hoverIntent來創建它，以便當您將鼠標懸停在軟件& Apps <li>上時，會顯示子菜單<ul>。下面是代碼：

$(function($) { 

    function showMenu(){ 
     $('#Menu ul').slideDown(500, "swing"); 
    } 
    function hideMenu(){ 
     $('#Menu ul').slideUp(500, "swing"); 
    } 

    $('#Menu > li.hassublinks > a').hoverIntent({ 
     over: showMenu, 
     timeout: 400, 
     out: hideMenu 
    }); 
});

此代碼只是讓這樣當一個頂級<li>有子鏈路的<a>標籤上空盤旋時，子菜單會出現，然後消失在鼠標指針離開時。這是有效的，但是有一個主要問題：在初始<li>展開子菜單後，如果鼠標指針移動到該子菜單或子菜單中的<li>後，子菜單被隱藏。顯然，這不應該發生。我在jsfiddle上創建了一個demo。有沒有什麼辦法解決這一問題？我之前一直在爲子菜單使用CSS3轉換，但是當我意識到您無法輕鬆地將元素的高度從0px（其關閉高度）轉換爲值「auto」（開放高度）時，切換到jQuery。現在使用jQuery，我可以輕鬆地將子菜單轉換爲全高，所以這不再是問題，但現在出現了這個問題，我無法弄清楚如何解決這個問題。有什麼辦法讓子菜單在懸停時保持打開狀態？

...我已經尋找類似的問題，並沒有找到幾個，但閱讀這些後，我看到他們參與<div's>，而不是<ul>'s，<li>'s和<a>'s，當我改變他們使用這些測試的這些問題的答案標籤，他們沒有正常工作。

來源

2012-08-01 eg001

試試這個

$(function($) { 

function showMenu() { 
    $('#Menu ul').slideDown(500, "swing"); 
} 

function hideMenu() { 
    $('#Menu ul').slideUp(500, "swing"); 
} 
    $("li.hassublinks").hoverIntent({ 
     over: showMenu, 
     timeout: 400, 
     out: hideMenu 
    }); 

});

來源

2013-01-11 18:53:24 Sabin

hoverIntent jQuery的子菜單不保持開放

回答

相關問題