悬停事件的jQuery多级选择器答案

【问题标题】：jQuery multi level selector for hover event悬停事件的jQuery多级选择器
【发布时间】：2016-04-19 08:46:29
【问题描述】：

我有一个结构如下的多级菜单：

 <div id="outer_div">    
    <div id="menu_liv0" class="menu">
        <ul>
            <li><a href="#" data-id="125" data-liv="0">text</a></li>
            <li><a href="#" data-id="184" data-liv="0">text</a></li>
            <li><a href="#" data-id="240" data-liv="0">text</a></li>
        </ul>
    </div>
    <div id="menu_liv1" class="menu">
        <ul>
            <li><a href="#" data-id="430" data-liv="1">text</a></li>
            <li><a href="#" data-id="307" data-liv="1">text</a></li>
            <li><a href="#" data-id="652" data-liv="1">text</a></li>
        </ul>
    </div>
    <div id="menu_liv2" class="menu">
        <ul>
            <li><a href="#" data-id="410" data-liv="2">text</a></li>
            <li><a href="#" data-id="174" data-liv="2">text</a></li>
            <li><a href="#" data-id="921" data-liv="2">text</a></li>
        </ul>
    </div>
</div>

我想使用 jQuery 来处理 li（或 a）的悬停事件以显示菜单的第二级，但我不知道该怎么做。我尝试了这种方式和 children("li").children("a") 方法都没有成功。

$("#menu_liv0 > ul > li").on("mouseenter", function(){
    //function that populates the second level of the menu goes here
    $("#menu_liv1").css("display", "block");            
});
$("#menu_liv0 > ul > li").on("mouseleave", function(){
    $("#menu_liv1").css("display", "none");
});

【问题讨论】：

你能解释一下liv1和2的情况吗？
对我来说你好像有三个单级菜单
无论如何你可以只使用 css :hover 来制作多级悬停菜单
@rerich 我已经使用 css hover 来更改 div 的背景，但我还需要在悬停 menu_liv0 的
时动态生成 menu_liv1，并在悬停 menu_liv1 的
时生成 menu_liv2。

【解决方案1】：

试一试

$(".menu ul li").hover(function(){
  $( this ).closest("menu").next().show();
}, function(){
  $( this ).closest("menu").next().hide();
});

这将确保当您将鼠标悬停在一个菜单项上时，会出现下一个菜单项，依此类推。

编辑：

看起来您正在将事件绑定到事件绑定时不存在的元素

试试这个

$(document).on("mouseenter", ".menu ul li", function(){
  $( this ).closest("menu").next().show();
});

$(document).on("mouseleave", ".menu ul li", function(){
  $( this ).closest("menu").next().hide();
});

【讨论】：

感谢您的快速响应。这似乎仅适用于 ul $(".menu ul") 但不适用于
。

@dubi0s 你能详细说明一下but it doesn't work on <li>吗？

在我的情况下使用 $(".menu ul li").hover() 不起作用但由于某种原因 $(".menu ul").hover() 工作正常（但它是对我没用，因为我需要

)

上的悬停事件

尝试更深一层并包括a

还是不行。可能我做错了什么。但是，正如 rav 所建议的那样，我使用 .live() 而不是 .on() 解决了我的问题。

【解决方案2】：

让“开”变成“活”。我做了一个小例子，请看看这个 https://jsbin.com/yeliqoroje/edit?html,js,output

【讨论】：

请您指向一个权威文档，上面说live 方法优于.on()？
谢谢！这完美地工作。只想知道： .on() 和 .live() 有什么区别？