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的子菜单不保持开放

回答

相关问题