javascript - 用于悬停事件的 jQuery 多级选择器

Question

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

 <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");
});

Answer 1

简单尝试

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

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

编辑:

看起来你正在将事件绑定(bind)到事件绑定(bind)时不存在的元素

试试这个

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

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