Jquery:下拉菜单在点击菜单外后不会消失

I'm new to jquery and I'm looking at google's code to create their 'More' button. I've got it working atm but the only way to make the drop down disappear is to click the 'More' button again. Is there a method I can add to change this so that any click outside of the drop down menu itself will close it? Thanks for the insight!

我是jquery新手，我正在查看谷歌的代码来创建他们的“More”按钮。我让它在自动取款机上工作，但是让下拉功能消失的唯一方法是再次点击“更多”按钮。我是否可以添加一个方法来更改它，以便在下拉菜单之外的任何点击都可以关闭它?谢谢你的见解!

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

4 个解决方案

#1

Bind a click event to html to capture any click made, and make it hide the menu

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

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

Then override that on your menu's click event using .stopPropagation();

然后使用.stopPropagation()重写菜单的单击事件;

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

Fiddle: http://jsfiddle.net/rKaPN/12/

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

#2

You could add this too , so the user don't have to click

你也可以添加这个，这样用户就不用点击了

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

#3

On opening of the menu, create a transparent overlay div of the same width and height of the window. On click of that div, close the menu and destroy the div.

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

#4

Rather than testing every click on the html dom element you could bind a blur event to the specific menu item when you make it active to then switch it off when the blur event is fired. Replace these few lines:

与其测试html dom元素上的每一次点击，还不如将模糊事件绑定到特定的菜单项上，然后在模糊事件被触发时将其关闭。取代这些几行:

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

with these:

与这些:

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

#1