Question

我有以下情况：

<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检查？

非常感谢！

Answer 1

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

Answer 2

Ayaz的回答对我很有帮助！

如果您可以将事件更改为鼠标悬停和mouseleave然后它可以通过 jQuery的切换功能

谢谢！ -

Answer 3

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

另一种选择是在图像和菜单上添加mouseover / mouseenter和mouseout / mouseleave侦听器，并在每次mouseout / mouseleave约1秒后设置超时，以检查mouseover / mouseenter设置的变量处理程序并查看它是否发生了变化 - 如果是这样，那么就有了另一个鼠标悬停/鼠标中心（即用户将鼠标从图像上移开，触发鼠标输出/鼠标离开，但随后在菜单上移动它，触发鼠标悬停/鼠标中心）。例如：

<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>

Answer 4

mouseover和mouseleave事件应解决此问题，或者在必须切换某些内容视图时更好地在这种情况下使用悬停。 api.jquery.com/hover

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

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

4 个答案: