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元素之上”这一块，你希望菜单在将鼠标移出div＃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 OR 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>

jQuery在mouseout上隐藏div

3 个答案: