jQuery 鼠标移出隐藏 div

Question

我看到了很多关于这个问题的帖子，但是找不到正确的解决方案。如果已经有人回答了，那么对不起。

我想要的是：我有一个带有菜单项的

元素，当点击href元素时会打开它。现在我想在鼠标移出

元素并且不在href元素上方时隐藏菜单。到目前为止，我只能在点击href元素时关闭它。

所以，我的jQuery代码如下：

$("#menu_opener").click(function () {
            if ($("#menudiv").is(":hidden")) {
                $("#menudiv").slideDown("slow");
            } else {
                $("#menudiv").hide();
            }
        });     

我的HTML代码如下：

<div>
<a href="#" id="menu_opener">Menu</a>
</div>
<div id="menudiv" style="position: fixed; background-color: white; display: none;">
    <a href="#" id="A1">Page 1</a><br />
        <a href="#" id="A2">Page 2</a><br /> 
    <a href="#" id="A3">Page 3</a><br />                           
</div>

提前致谢！

- Jorelie

Answer 1

您可以保留HTML不变，只需添加以下内容：

您可以保留HTML不变，只需添加以下内容：

$("#menudiv").mouseleave(function(){
    $(this).hide();
});

jsFiddle：http://jsfiddle.net/5SSDz/

- NakedBrunch

---

回答不错，但有一些小问题。当你将鼠标悬停在单词“测试”上，然后向右移动鼠标，再返回到“测试”，然后向下移动时，会出现一些奇怪的行为。我不知道如何修复它，只是让你知道它有点小问题。 - Jayden Lawson

@JaydenLawson 我建议你使用CSS来实现，而不是使用JavaScript。我的经验是鼠标事件并不完全可靠。你可以使用一些CSS3过渡效果。我相信你可以在Google上找到一些相关内容，我不是一个CSS专家，所以无法提供CSS代码方面的帮助。 - harsimranb

Answer 2

如果我理解“不在href元素上方”这一段的意思，您希望当鼠标移出div#menudiv时菜单仍然保持可见，但仍然悬停在a#menu_opener上吗？

如果是这样，我会将整个内容包装在一个唯一的div中并进行目标定位。使用mouseleave而不是mouseout。

http://api.jquery.com/mouseleave/

那么，你的HTML变成了：

<div id="menu_container">
  <div>
    <a href="#" id="menu_opener">Menu</a>
  </div>
  <div id="menudiv" style="position: fixed; background-color: white; display: none;">
    <a href="#" id="A1">Page 1</a><br />
    <a href="#" id="A2">Page 2</a><br /> 
    <a href="#" id="A3">Page 3</a><br />                           
  </div>
</div>

你的脚本将会是这样的：

$("#menu_opener").click(function () {
  if ($("#menudiv").is(":hidden")) {
      $("#menudiv").slideDown("slow");
  } else {
      $("#menudiv").hide();
  }
});
$("#menu_container").mouseleave(function(){
    $('#menudiv').hide();
});

- Marc Smith

---

带有一些额外的CSS定位，这个解决方案非常完美！ - Jorelie

Answer 3

编辑：抱歉第一次误读了问题。我不得不做几次，我总是将菜单向上移动一个像素，以便它重叠在href元素上。然后如果正在悬停在href或href元素上，则显示/隐藏菜单。

$("#menu_opener, #menudiv").hover(
    function(){
        $("#menudiv").show();
    },
    function(){
        $("#menudiv").hide();
    }
);

设置菜单div的样式中的顶部属性，使其向上移动并重叠在href之上。

<div>
    <a href="#" id="menu_opener">Menu</a>
</div>
<div id="menudiv" style="position: fixed; top: -1px; background-color: white; display: none;">
    <a href="#" id="A1">Page 1</a><br />
    <a href="#" id="A2">Page 2</a><br /> 
    <a href="#" id="A3">Page 3</a><br />                           
</div>

- Saad Imran.