Question

我正在尝试使用自行开发的jQuery工具提示菜单，因为我并不真正需要插件的所有功能（和开销）。

我的网站提供了典型的顶级菜单，其中包含一些需要下拉/工具提示子菜单的项目。标记如下：

<ul class="topmenu">
<li class="topmenu" id="flink">
<a href="pagewithsubmenu.php" class="topmenu">Link Text For Submenu 1</a>
<div id="fmenu" style="display: none;" class="submenu">
<a href="submenu_link_1.php">Submenu Link 1</a><br>
<a href="submenu_link_2.php">Submenu Link 2</a><br>
<a href="submenu_link_3.php">Submenu Link 3</a><br>
<a href="submenu_link_4.php">Submenu Link 4</a><br>
</div>
</li>
<li class="topmenu"><a href="about.php" class="topmenu">About</a></li>
<li class="topmenu"><a href="contact.php" class="topmenu">Contact Us</a></li>
<li class="topmenu" id="ulink">
<a href="pagewithsubmenudeaux.php" class="topmenu">Link Text For Submenu 2</a>
<div id="umenu" style="display: none;" class="submenu">
<a href="submenu_link_1a.php">Submenu Link 1a</a><br>
<a href="submenu_link_2a.php">Submenu Link 2a</a><br>
<a href="submenu_link_3a.php">Submenu Link 3a</a><br>
<a href="submenu_link_4a.php">Submenu Link 4a</a><br>
</div>
</li>
</ul>

这是我正在使用的jQuery：

$("#ulink").hover(function(){
    $('#fmenu').slideUp(300);
    $('#umenu').slideDown(300);
    }, function(){
        var link = $(this);
        window.setTimeout(function(){
            //  $('#umenu').slideUp(300);
        }, 800);
    });

$("#umenu").hover(function(){
    $('#fmenu').slideUp(300);
    $('#umenu').slideDown(300);
    }, function(){
        var link = $(this);
        window.setTimeout(function(){
                $('#umenu').slideUp(300);
        }, 800);
    });

$("#flink").hover(function(){
    $('#umenu').slideUp(300);
    $('#fmenu').slideDown(300);
    }, function(){
        var link = $(this);
        window.setTimeout(function(){
            //  $('#fmenu').slideUp(300);
        }, 800);
    });

$("#fmenu").hover(function(){
    $('#umenu').slideUp(300);
    $('#fmenu').slideDown(300);
    }, function(){
        var link = $(this);
        window.setTimeout(function(){
                $('#fmenu').slideUp(300);
        }, 800);
    });

这个几乎给了我所需要的东西。如果我将鼠标悬停在任一主链接上，则正确的子菜单会打开 - 如果其他子菜单当前处于打开状态，则会滑动关闭。到目前为止，非常好。

如果我将鼠标向下滚动到子菜单，只要鼠标悬停在任何部分上，它就会保持打开状态。一旦鼠标移出子菜单，它会在短暂延迟后滑动关闭。完美。

但是，如果我只是将鼠标移离主链接而不将鼠标悬停在另一个主链接或创建的子菜单上（例如，我将鼠标移到侧面，然后在子菜单周围）），然后subenu将保持打开直到时间结束（或刷新浏览器窗口，以先到者为准）。

你注意到我已经注释掉了与父链接LI元素相关的slideUp（）部分，因为一旦鼠标离开父链接，它们就会滑动我的子菜单，即使我已经将鼠标悬停在相应的子菜单上。这种行为显然使菜单无法使用，而现在它们只是略显烦人。

我错过了什么愚蠢的明显解决方案？

感谢您的帮助。

Answer 1

由于子菜单是li的一部分（你称之为“链接”），因此只需向上滑动就可以了。我没有看到任何问题，当你被鼠标滑过它时，子菜单会向后滑动。注意详细说明您看到的浏览器和版本？

$("#ulink").hover(function(){
    $('#fmenu').slideUp(300);
    $('#umenu').slideDown(300);
    }, function(){
        var link = $(this);
        window.setTimeout(function(){
            $('#umenu').slideUp(300);
        }, 800);
    });

$("#flink").hover(function(){
    $('#umenu').slideUp(300);
    $('#fmenu').slideDown(300);
}, function(){
    var link = $(this);
    window.setTimeout(function(){
        $('#fmenu').slideUp(300);
    }, 800);
});

http://jsfiddle.net/vau9jtos/1/

编辑：

http://jsfiddle.net/vau9jtos/2/

绝对定位菜单
静态定位子菜单
宽度为0的子菜单容器，以防止主导航栏扩展

Answer 2

在研究了各种各样的答案 - 停止（真实，真实），玩课程等之后，我终于找到了至少可以工作的kludgy解决方案。

我为每个子菜单设置了一个隐藏字段。在页面加载时，该值设置为零。

在鼠标悬停子菜单时，隐藏字段设置为值1.在子菜单的鼠标输出中，隐藏字段的值设置为0.

我已经在链接本身重新启用了鼠标悬停代码部分，但是为它们添加了一个if语句。如果隐藏字段设置为零（即，用户当前没有在子菜单上进行鼠标处理），则子菜单向上滑动。如果隐藏字段当前设置为1（用户被鼠标放在子菜单上），则没有任何反应。

HTML：

<input type="hidden" id="fph" value="0"> 
<input type="hidden" id="uph" value="0"> 
<ul class="topmenu">
<li class="topmenu" id="flink">
<a href="pagewithsubmenu.php" class="topmenu">Link Text For Submenu 1</a>
<div id="fmenu" style="display: none;" class="submenu">
<a href="submenu_link_1.php">Submenu Link 1</a><br>
<a href="submenu_link_2.php">Submenu Link 2</a><br>
<a href="submenu_link_3.php">Submenu Link 3</a><br>
<a href="submenu_link_4.php">Submenu Link 4</a><br>
</div>
</li>
<li class="topmenu"><a href="about.php" class="topmenu">About</a></li>
<li class="topmenu"><a href="contact.php" class="topmenu">Contact Us</a></li>
<li class="topmenu" id="ulink">
<a href="pagewithsubmenudeaux.php" class="topmenu">Link Text For Submenu 2</a>
<div id="umenu" style="display: none;" class="submenu">
<a href="submenu_link_1a.php">Submenu Link 1a</a><br>
<a href="submenu_link_2a.php">Submenu Link 2a</a><br>
<a href="submenu_link_3a.php">Submenu Link 3a</a><br>
<a href="submenu_link_4a.php">Submenu Link 4a</a><br>
</div>
</li>
</ul>

更新的jQuery：

$("#ulink").hover(function(){
    $('#fmenu').slideUp(300);
    $('#umenu').slideDown(300);
    }, function(){
        var link = $(this);
    window.setTimeout(function(){
        if($('#uph').val()==0){
            $('#umenu').slideUp(300);
        }
        }, 800);
    });

$("#umenu").hover(function(){
    $('#uph').val(1);
    $('#fmenu').slideUp(300);
    $('#umenu').slideDown(300);
    }, function(){
        var link = $(this);
        window.setTimeout(function(){
        $('#umenu').slideUp(300);
        $('#uph').val(0);
        }, 800);
    });

$("#flink").hover(function(){
    $('#umenu').slideUp(300);
    $('#fmenu').slideDown(300);
    }, function(){
        var link = $(this);
    window.setTimeout(function(){
        if($('#fph').val()==0){
            $('#fmenu').slideUp(300);
        }
        }, 800);
    });

$("#fmenu").hover(function(){
    $('#fph').val(1);
    $('#umenu').slideUp(300);
    $('#fmenu').slideDown(300);
    }, function(){
        var link = $(this);
        window.setTimeout(function(){
        $('#fmenu').slideUp(300);
            $('#fph').val(0);
        }, 800);
    });

像魅力一样。

jQuery工具提示菜单无法正确隐藏

2 个答案: