如何使用jQuery关闭mouseout上的列表菜单

我有以下情况：

<div class="dropMenuWrapper_content">
<img src="images/dropMenu.gif" class="menu_head_content" />
<ul class="menu_body_content scroll-pane" id="SmallDropDown">
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/0.aspx">1</a></li>
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/1.aspx">2</a></li>
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/2.aspx">3</a></li>
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/3.aspx">4</a></li>
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/4.aspx">5</a></li>
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/5.aspx">6</a></li>
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/6.aspx">7</a></li>
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/7.aspx">8</a></li>
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/8.aspx">9</a></li>
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/9.aspx">10</a></li>
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/10.aspx">11</a></li>
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/11.aspx">12</a></li>
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/12.aspx">13</a></li>
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/13.aspx">14</a></li>
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/14.aspx">15</a></li>
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/15.aspx">16</a></li>
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/16.aspx">17</a></li>
</ul>

当我单击dropMenu图像时，列表打开，显示使用jQuery的下拉菜单。所有的工作都很好，除了当我离开图像或列表本身时，我需要它来关闭菜单。我已经有我的功能关闭菜单时，你再次点击图像，但我需要它关闭时，你离开图像或列表

我想我可以使用dropMenuWrapp_content div，当它打开时，它会随着内容拉伸，所以当你将鼠标从该div中移出时，它会关闭，但它有很多缺陷

在Flash中，我会设置一个hitTest来查看鼠标的位置，如果鼠标不再位于该区域，下拉菜单将关闭

有没有更好的方法让我使用jQuery检查这个问题

---

非常感谢

将单击关闭处理程序添加到BODY标记。这样，当您单击菜单外的任何位置时，菜单将关闭。

Ayaz的回答对我来说非常有用

---

如果您可以将事件更改为鼠标悬停 然后把鼠标移开，就可以用 jQuery的切换函数

谢谢！

---

–

如果将下拉选项设置为打开菜单的按钮的子项，然后向打开菜单的按钮添加mouseout/mouseleave事件侦听器，则如果鼠标位于打开菜单的按钮和子项之外，则应应用该侦听器，因为它们现在是菜单的一部分。但是，除非动态添加子标记，否则标记不能包含子标记，因此应将标记更改为可以包含子标记但不能包含块级元素的其他标记，并使用CSS background image属性指定图像

另一个选项是在图像和菜单上添加mouseover/mouseenter和mouseout/mouseleave监听器，并在每次mouseout/mouseleave后设置一个约1秒的超时，该超时将检查mouseover/mouseenter处理程序设置的变量，并查看它是否发生了更改-如果是，然后出现了另一个mouseover/mouseenter ie。用户将鼠标移离图像，触发mouseout/mouseleave，然后在菜单上移动鼠标，触发mouseover/mouseenter。例如：

---

mouseover和mouseleave事件应该可以解决这个问题，或者在需要切换某些内容视图的情况下，最好使用hover。api.jquery.com/hover

<img src="images/dropMenu.gif" class="menu_head_content" />
<ul class="menu_body_content scroll-pane" id="SmallDropDown">
    <li><a class="modalWindow cboxElement" href="http://mysite.com/service/0.aspx">1</a></li>
...
    <li><a class="modalWindow cboxElement" href="http://mysite.com/service/16.aspx">17</a></li>
</ul>

<script type="text/javascript">
// Global var
var is_in_menu = false;

$(function () {
    // Initially hide menu body
    $(".menu_body_content").hide();

    // MouseEnter event handler
    $(".menu_head_content, .menu_body_content").bind("mouseenter", function () {
        is_in_menu = true;
        if ($(".menu_body_content").css("display") == "none") {
            $(".menu_body_content").fadeIn("fast");
        }
    });

    // MouseLeave event handler
    $(".menu_head_content, .menu_body_content").bind("mouseleave", function () {
        is_in_menu = false;
        setTimeout(function () {
            if (is_in_menu === false) {
                $(".menu_body_content").fadeOut("fast");
            }
        }, 1000);
    });

    // Image click handler
    $(".menu_head_content").click(function () {
        is_in_menu = true;
        if ($(".menu_body_content").css("display") == "none") {
            $(".menu_body_content").fadeIn("fast");
        }
    });
});
</script>

---

尝试$'SmallDropDown'。隐藏以关闭菜单…如果您可以将事件更改为mouseover和mouseleave，则可以通过jQueryAyaz的切换功能来完成，mouseleave事件就像炸弹一样工作！jQuery还提供了包含2个参数的悬停事件，这两个参数都是函数。第一个参数是mouseenter的函数，第二个参数是mouseleave的函数。您可能需要查看它的文档。请注意：我使用了mouseenter和mouseleave而不是mouseover和mouseout-这通常是IE特有的，但是jQuery有特殊的处理程序来避免mouseover和mouseout的问题。查看jQuery页面，了解这些事件、和/或可通过谷歌找到的众多页面。你应该接受他的答案，并尝试使用评论来表达你的感激之情：答案是。。。好答案是：没问题，那比较容易。

  $("img")
        .hover(function(){   
                  Here show code should come     
               },
               function(){           
                    Here show code should come which should hide only if mouse coordinates are              not over menu
                       });