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）的悬停事件以显示菜单的第二级但我无法弄清楚如何去做。我试过这种方式和孩子（“li”）。孩子（“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();
});

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

修改

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

试试这个

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

Answer 2

将“on”设为“live”。我做了一个小例子，请看看这个 https://jsbin.com/yeliqoroje/edit?html,js,output

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

2 个答案: