Question

我现在已经获得了基本的，普通的菜单树，如下所示：

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

感谢您的帮助。雷米

Answer 1

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

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

Answer 2

你可以在没有js的情况下实现这一点，尽管你需要ies的js。

这样的事情可能有用：

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

甚至：

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

这里'这'是李。

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

2 个答案: