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下拉菜单悬停状态

回答

相关问题