带有嵌套元素的 jQuery 悬停事件

Posted 2023-05-08

【中文标题】带有嵌套元素的 jQuery 悬停事件

【英文标题】：jQuery hover event with nested elements

【发布时间】：2010-11-22 14:22:14

【问题描述】：

我目前有如下基本的、普通的菜单树：

<ul id="nav">
  <li>
    <a href="#">home</a>
    <div class="controls">Some controls go here</div>
    <ul>
      <li>
        <a href="#">item 1</a>
        <div class="controls">Some controls go here</div>
      </li>
      <li>
        <a href="#">item 2</a>
        <div class="controls">Some controls go here</div>
      </li>
    </ul>
  </li>
</ul>

具有“控件”类的 div 一开始是隐藏的。我想要发生的是，当您将鼠标悬停在 li 上时，相应 li 的控件会显示（当您将鼠标移开时，它们会再次隐藏）。当您将鼠标悬停在其中一个嵌套的 li 上时，就会出现问题，它也会显示它的父控件。这是我正在使用的 jQuery：

    $("#nav li").hover(
        function() 
            $(".controls:first", this).css("display", "block");
        ,
        function() 
            $(".controls:first", this).css("display", "none");
        
    );

感谢您的帮助。 雷米

【问题讨论】：

尝试使用 $("#nav > li")

嘿，Remy，您对此得到答案是否满意？我有一个很好的解决方案，如果你愿意，我可以发布...？

【参考方案1】：

尝试在悬停函数中停止事件传播，以防止事件冒泡到父级。如果您的“悬停”元素靠得很近，您可能还想查看hoverIntent 插件来解决“闪烁”悬停效果问题。

$("#nav li").hover(
    function(e) 
            e.stopPropagation();
            $(".controls:first", this).css("display", "block");
        ,
        function() 
            $(".controls:first", this).css("display", "none");
        
);

【讨论】：

8 年后，真希望我能为这个答案给你买杯啤酒 :)

【参考方案2】：

你实际上可以不用 js 来做到这一点，尽管你需要 ie6 的 js。

这样的事情可能会奏效：

$(this).children('div').css("display", "block");

甚至：

$(this).children('div').show();

这里的'this'是li。