Jquery：单击菜单外部后下拉菜单不会消失答案

【问题标题】：Jquery: drop down menu wont disappear after clicking outside of menuJquery：单击菜单外部后下拉菜单不会消失
【发布时间】：2011-10-27 20:14:46
【问题描述】：

我是 jquery 的新手，我正在查看谷歌的代码来创建他们的“更多”按钮。我已经让它在 atm 工作，但使下拉菜单消失的唯一方法是再次单击“更多”按钮。有没有我可以添加的方法来更改它，以便下拉菜单本身之外的任何点击都会关闭它？感谢您的洞察力！

http://jsfiddle.net/rKaPN/1/

【问题讨论】：

标签： jquery html css

【解决方案1】：

将点击事件绑定到 html 以捕获任何点击，并使其隐藏菜单

$("html").click(function() {
  menu.find('.active').removeClass('active');
});

然后使用 .stopPropagation(); 在菜单的 click 事件上覆盖它

menu.find('ul li > a').bind('click', function (event) {
  event.stopPropagation();

小提琴： http://jsfiddle.net/rKaPN/12/

【讨论】：

不是一个很好的解决方案，因为每次点击都会做很多不必要的工作，当菜单已经隐藏时

【解决方案2】：

你也可以添加这个，所以用户不必点击

$("body:not(.menu)").hover(function(){ $(".menu").find('.active').removeClass('active');})

【讨论】：

很好，我也很喜欢这个，我会保留这个以防我以后需要它

【解决方案3】：

在打开菜单时，创建一个与窗口宽度和高度相同的透明覆盖 div。单击该 div，关闭菜单并销毁该 div。

【讨论】：

【解决方案4】：

您可以在激活特定菜单项时将模糊事件绑定到特定菜单项，然后在触发模糊事件时将其关闭，而不是测试对 html dom 元素的每次点击。替换这几行：

  //displaying the drop down menu
  $(this).parent().parent().find('.active').removeClass('active');
  $(this).parent().addClass('active');

这些：

  //displaying the drop down menu
  $('.active').removeClass('active');
  $(this).parent().addClass('active');
  $(this).blur(function() {
      $('.active').removeClass('active');
  });

【讨论】：