Question

摘要/问题：

将鼠标悬停在菜单系统中使用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>

基本上，<li>中ID为“Menu”的每个<ul>都有一个指向网站页面的链接，其中一个<li>'s包含一个子菜单（另一个{{1}更多链接。带有子菜单的<ul>被赋予“hassublinks”类，并且其中仍然有一个<li>标记，用于链接到主软件＆amp;应用页面。但是因为它包含一个子菜单，我还使用了jQuery和hoverIntent来实现它，这样当你将鼠标悬停在软件和软件上时应用<a>，显示子菜单<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 }); });中包含子链接的<a>标记悬停时，子菜单将显示，然后在鼠标指针离开时消失。这有效，但是存在一个主要问题：在初始<li>悬停以显示子菜单后，如果鼠标指针移动到该子菜单或者<li>中子菜单，子菜单是隐藏的。显然，这不应该发生。我在jsfiddle上创建了一个demo。有没有什么办法解决这一问题？我以前一直在为子菜单使用CSS3过渡，但当我意识到你不能轻易地将元素的高度从0px（其封闭高度）转换为值“auto”（其开放高度）时切换到jQuery。现在有了jQuery，我可以轻松地将子菜单转换到它的完整高度，这样就不再是问题了，但是现在出现了这个问题，我无法弄清楚如何修复它。有没有办法让子菜单在悬停时保持打开状态？

我搜索了类似的问题并找到了一些，但在阅读后我看到他们涉及<li>而不是<div's>，<ul>'s和<li>'s，当我通过更改它们以使用这些标签来测试这些问题的答案时，它们无法正常工作。

Answer 1

试试这个

$(function($) {

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

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

});

hoverIntent jQuery子菜单没有保持打开状态

1 个答案: