jQuery在mouseout上隐藏div

Question

我在这个项目上看了很多帖子,但找不到合适的解决方案.对不起,如果已经在某个地方回答了.

我想要的: 我有一个DIV菜单项,当click事件被触发一个href元素时打开.现在我想隐藏菜单,当鼠标离开DIV元素并且不在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>

提前致谢!

Answer 1

您可以按原样保留HTML,只需添加以下内容:

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

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

Answer 2

如果我理解"不是在href元素之上"这一块,你希望菜单在将鼠标#menudiv移除时保持可见,但仍然会在#menu_opener上徘徊？

如果是这样的话,我会将整个东西包裹在一个unqiue div中,并将其作为目标.并在mouseout上使用mouseleave.

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

Answer 3

编辑：抱歉第一次看错问题。我必须这样做几次，而且我总是将菜单向上移动一个像素，以便它与 href 元素重叠。然后，如果 href 或 href 元素悬停，则显示/隐藏菜单。

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

并设置 menudiv 样式的 top 属性，以便它向上移动并与 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>