Jquery/HTML下拉菜單懸停狀態

我試圖創建一個下拉菜單，即使當它懸停在下拉div（'＃units-menu-links'）上時，它仍然保持打開懸停狀態。當用戶仍然在'單元菜單鏈接'div上徘徊時，我無法保持打開狀態。目前它什麼都不做，但是在第二個函數裏面有.toggle之前，只要用戶沒有在「＃units-nav」div上徘徊，它就會消失。Jquery/HTML下拉菜單懸停狀態

這裏是我的HTML是什麼樣子：

<div id="units-menu-links"> 
    <center> 
      <p class="units-menu-links-items" href="dynamically generated URL">Menu Item</p> 
    </center> 
</div> 

<div id="menu"> 
     <div id="menu-inside"> 
       <div class="bar"> 
         <div class="nav-block" id="units-nav"> 
           <a href="/link/">Menu Button</a> 
         </div> 
       </div> 
     </div> 
</div>

這裏是我的Jquery：

$('#units-menu-links').hide(); 
    $("#units-nav").hover(
      function() { 
       // Over the hover. 
       $('#units-menu-links').toggle(); 
      }, 
      function() { 
       // PLEASE READ THE FOLLOWING COMMENTS TO UNDERSTAND THE FUNCTIONALITY I AM TRYING TO GET. 
       // When the users leaves #units-nav and #units-menu-links 
       // then do the "$('#units-menu-links').toggle();" again to hide this. 
       // However if the user is hovering over "$('#units-menu-links').toggle();" then don't do anything. 
      } 
    );

（我在上了不少的問題和答案看起來是如此，以及看好Google，並且找不到任何東西來幫助我解決這個問題，看起來這是一個非常普遍的問題，但是人們創建的HTML結構與我的不同，這使得很難找到資源。）

來源

2012-07-27 tushar747

是否有任何答案可以解決您的問題？ – Stefan 2012-07-31 07:34:24

嘗試在鼠標移出子菜單時隱藏菜單：

$('#units-menu-links').hide(); 
$("#units-nav").hover(
    function() { 
     $('#units-menu-links').show(); 
    }, 
    function() { 
    } 
); 
$("#units-menu-links").hover(
    function() { 
    }, 
    function() { 
     $('#units-menu-links').hide(); 
    } 
);

理想情況下，我建議不要使用JavaScript。

HTML：

<div id="menu" style="background-color: red"> 
    <div id="menu-inside"> 
     <div class="bar"> 
      <div class="nav-block" id="units-nav"> 
       <a href="/link/">Menu Button</a> 
      </div> 
     </div> 
    </div> 
    <div id="units-menu-links" style="background-color: green"> 
     <center> 
      <p class="units-menu-links-items" href="dynamically generated URL">Menu Item</p> 
     </center> 
    </div> 
</div>

CSS：

#menu #units-menu-links { 
    display: none; 
} 

#menu:hover #units-menu-links { 
    display: block; 
}

這裏的Fiddle。

來源

2012-07-27 07:35:44 Stefan

使用懸停時，應該將子菜單嵌套在#units-nav元素下。然後它會工作。如果不能這樣做，你可以實現一些超時你的懸停功能的第二個回調，你可以停止超時，如果用戶將盤旋#units-menu-links-element ..但這是有點可怕的，用戶可以混淆那個行爲。

來源

2012-07-27 07:35:48 simekadam

$('#units-menu-links').hide(); 
var timeOut; 
$("#units-nav").hover(
    function() { 
     // Over the hover. 
     $('#units-menu-links').show(); 
     clearTimeout(timeOut); 
    }, 
    function() { 
     timeOut = setTimeout(function(){ 
      $('#units-menu-links').hide(); 
     }, 100); 
    } 
); 

$('#units-menu-links').hover(
    function() { 
     clearTimeout(timeOut); 
    }, 
    function() { 
     timeOut = setTimeout(function(){ 
      $('#units-menu-links').hide(); 
     }, 100); 
    } 
)

來源

2012-07-27 07:55:01 Kir

Jquery/HTML下拉菜單懸停狀態

回答

相關問題