Question

可能重复：
Jquery: drop down menu wont disappear after clicking outside of menu

我最近在creating google like black menu bar with the dropdown

上找到了一个教程

当我们点击“更多”按钮时会显示下拉列表，要再次隐藏下拉列表，我们应再次点击“更多”按钮

但是我想通过点击身体的任何地方关闭下拉列表，任何人都可以让我知道如何

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/

P.S。：该演示适用于最新的jquery版本

Answer 2

如果你给持有主要内容的div一个id（在下面的例子中我已经为这个div添加了'content'的id），那么你可以在点击它时关闭任何活动菜单：

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

或者绑定blur事件以在添加活动类时删除它：

  //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');
    });
  }

Updated jsFiddle.

Answer 3

具有讽刺意味的是，最近又提出了同样的问题：Jquery: drop down menu wont disappear after clicking outside of menu

用户解释说，您只需将点击事件绑定到标记的html标记即可，如果您点击下拉列表中的某个项目，该标记将关闭该下拉菜单以及如何停止您的下拉列表立即关闭e.stopPropagation()。

如何使用jquery关闭单击身体任何位置的下拉列表

3 个答案:

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