jQuery 在 Mouseleave 事件上隐藏菜单

Question

我设置了以下网站[网站位置已编辑] (它才刚刚开始，所以只有顶部按钮和一级菜单有效):

当您将鼠标悬停在“请求”按钮上时，会弹出“请求”菜单。
我需要弄清楚两件事:

1. 当鼠标离开菜单按钮或子菜单本身时，如何隐藏菜单以及
2. 有没有一种更优雅的方法来做到这一点，而不是为每个按钮编写 jQuery(换句话说，我可以编写适用于每个按钮的更通用的代码)。

这是我目前使用的 jQuery:

$(document).ready(function(){
    $('request-it-menu').hide();
    $('#request-it-button, #request-it-menu').mouseenter(function() {
        $('#request-it-menu').show();
        $('#request-it-button, #request-it-menu').mouseleave(function() {
            $('request-it-menu').hide();
        });
    });
});

Answer 1

好的，我们开始吧。首先，为了让“子菜单”更容易隐藏，我给每个子菜单添加了一个类。这提供了一个调用的焦点，不仅在 CSS 中，而且在 jquery 分配中也是如此。

<div id="request-it-menu" class="sub-menu">

在CSS中，除了给子菜单一个隐藏的显示和相对的位置之外，我没有太多特别的地方。现在你可以按照你喜欢的方式重新设计，我在这里给出了相对位置，以便可以使用 top 定位子菜单。

.sub-menu { display: none; position: relative; }

有了这些，我们就可以接触到 JavaScript 了……差不多了!还有一件事!在您的菜单 HTML 中，我向每个图像添加了一个数据变量。我使用此变量来保存每个 .sub-menu 的 ID。现在这是没有必要的，毕竟，您可以编写一个复杂的语句来使用从图像 ID 中删除单词按钮并将其更改为菜单，但为什么要变得复杂呢？

<img id="request-it-button" data-submenu="#request-it-menu"

终于! JavaScript。由于我们的数据变量，此时使调用变得“动态”和“单一”真的很容易。首先，我使用 jQuery 的 .on() 方法的委托(delegate)版本，以便将鼠标事件添加到给定选择器的动态元素中。选择器本身是一个“一揽子”声明，这意味着它会抓取与其非常简单的描述相符的所有内容。在本例中，我只是直接使用 head 菜单 ID 到 img 的内部。

$(function() {  //  same as $(document).ready(function() { ...
    //  calling this way in jquery is using "delegate" form of .on
    //  this assures function to even dynamic elements of the fitting selector
    $(document).on("mouseenter", "#topMenu > img", function(e) {
        var menu = $(this).data("submenu");
        //  position part here is temporary till you decide how you want css to arange sub menu's
        $(menu).css("top", $(this).position().top-9).show();
    })
    .on("mouseleave", "#topMenu > img", function(e) {
        var menu = $(this).data("submenu");
        $(menu).hide();
    })
})

Full Working Example

<小时/>

根据评论修复

$(function() {
    var tmrSubMenu;
    $(document).on("mouseenter", "#topMenu > img", function(e) {
        $(".sub-menu").hide();
        var menu = $(this).data("submenu");
        $(menu).css("top", $(this).position().top-9).show();
    })
    .on("mouseleave", "#topMenu > img", function(e) {
        var menu = $(this).data("submenu");
        tmrSubMenu = setTimeout(function() { $(menu).hide(); }, 100);
    })
    .on("mouseenter", ".sub-menu", function(e) {
        clearTimeout(tmrSubMenu);
    })
    .on("mouseleave", ".sub-menu", function(e) {
        $(this).hide();
    })
})