如何关闭使用jQuery单击身体上任何位置的下拉菜单[重复]

Question

可能重复：
jQuery：下拉菜单在菜单外单击后不会消失

我最近找到了一个与下拉菜单类似的创建Google类似黑色菜单栏的教程

当我们单击“更多”按钮时，将显示下拉菜单，要再次隐藏该下拉菜单，我们应再次单击“更多”按钮

但我想通过单击身体上的任意位置来关闭下拉菜单，有人可以让我知道如何

http://jsfiddle.net/VrmnA/

提前致谢

Answer 1

基本逻辑应该是这样的：如果在菜单外的任何地方单击，请关闭下拉菜单：

var dropdown = $('dropdown_selector');
$(document).click(function(e){
    if(e.target === dropdown.get(0))
        {
            // hide dropdawn code here
        }
});

这是一个现场演示：

http://jsfiddle.net/gion_13/VrmnA/7/

PS：该演示适用于最新的jQuery版本

Answer 2

如果为包含主要内容的div提供一个ID（在下面的示例中，我为此div添加了一个“ content”的ID），则可以在单击该菜单时从那里关闭所有活动菜单：

$('#content').click(function() {
        $('.active').removeClass('active');
});

或者，绑定模糊事件以在添加活动类时将其删除：

  //hiding drop down menu when it is clicked again
  if ($(this).parent().hasClass('active')) {
    $(this).parent().removeClass('active');
  }
  else {
    //displaying the drop down menu
    $('.active').removeClass('active');
    $(this).parent().addClass('active');
    $(this).blur(function() {
        $('.active').removeClass('active');
    });
  }

更新了jsFiddle。

Answer 3

具有讽刺意味的是，最近又问了这个完全相同的问题： jQuery：单击菜单外部后，下拉菜单不会消失

用户解释说，您可以将click事件简单地绑定到标记的html标签上，这将关闭下拉菜单，以及如果您使用e.stopPropagation()在下拉菜单中单击某个项目，则如何阻止立即关闭下拉菜单。