单击菜单以外的任何位置时，jQuery隐藏下拉菜单答案

【问题标题】：jQuery hide dropdown when clicked anywhere but menu单击菜单以外的任何位置时，jQuery隐藏下拉菜单
【发布时间】：2012-01-10 08:42:47
【问题描述】：

我正在尝试使我的下拉菜单在您单击按钮时显示，并在您单击下拉菜单以外的任何位置时隐藏。

我有一些代码在工作，就在您单击菜单时不关闭，但是当您在菜单关闭时单击文档时，它会显示菜单，因此无论您单击何处，它都会不断切换。

$(document).click(function(event) {
    if ($(event.target).parents().index($('.notification-container')) == -1) {
        if ($('.notification-container').is(":visible")) {
            $('.notification-container').animate({
                "margin-top": "-15px"
            }, 75, function() {
                $(this).fadeOut(75)
            });
        } else {
            //This should only show when you click: ".notification-button" not document
            $('.notification-container').show().animate({
                "margin-top": "0px"
            }, 75);
        }
    }
});

【问题讨论】：

描述你的代码；它将click事件绑定到整个document，当该事件被触发时，它会检查target(clicked)元素是否有任何具有“.notification-container”类的父元素，如果有，它会检查是否有任何元素具有该类可见。如果是这样，它会隐藏（动画）类“.notification-container”的所有元素，否则它会显示（动画）它们。
最好的解决方案是 [stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element][1]。 [1]：stackoverflow.com/questions/152975/…
嘿伙计，你介意接受一个答案吗？ :)

标签： javascript jquery jquery-events

【解决方案1】：

jQuery的closest()函数可以用来查看点击是否不在菜单内：

$('body').click(function(e) {
    if ($(e.target).closest('.notification-container').length === 0) {
        // close/animate your div
    }
});

【讨论】：

我无法让它按预期工作，它的作用与我当前的代码相同
这很简单而且效果很好。您可能需要考虑将点击事件添加到 html 而不是正文，以防您的页面没有填满视口的整个高度
如果特定的子处理程序停止传播，这仍然有效吗？如果用户在其网站的任何地方都有停止传播的代码（无论是来自库还是遗留代码），这不会影响此解决方案吗？

【解决方案2】：

如果你的项目没有被点击，你可以这样做，然后在下拉的情况下隐藏它的下拉列表

$(':not(#country)').click(function() {
     $('#countrylist').hide();
});

【讨论】：

【解决方案3】：

我为此使用了一个非常简单的代码：-

$(document).click(function(e){

   if($(e.target).closest('#dropdownID').length != 0) return false;
   $('#dropdownID').hide();
});

希望有用。

谢谢！！

【讨论】：

【解决方案4】：

我通常是这样的：

$('.drop-down').click(function () {
    // The code to open the dropdown

    $('body').click(function () {
        // The code to close the dropdown
    });
});

所以把你的body（其他地方）点击函数放在下拉打开点击函数里面。

【讨论】：

奇怪的是，这似乎仍然与我当前的代码做同样的事情。不过谢谢

【解决方案5】：

这可能不是一个完整的解决方案，但我创建了一个 demo 来帮助您。让我知道它没有按您的预期工作。

$(document).click(function(e) {

    var isModalBox = (e.target.className == 'modal-box');

    if (!isModalBox) {
        $('.modal-box:visible').animate({
            "margin-top": "-15px"
        }, 75, function() {
            $(this).fadeOut(75);
        });
    }
});

$('a').click(function(e) {
    e.stopPropagation(); // Important if you´d like other links to work as usual.
});

$('#temp-button').click(function(e) {
    e.preventDefault();
    $('.modal-box').show().animate({
        "margin-top": "0px"
    }, 75);
});

【讨论】：

这似乎在您的小提琴演示中正常工作，谢谢。但是我发现了一个完美运行的插件，代码更少，我将其发布为我的答案。

【解决方案6】：

试试这个：

// The code to close the dropdown
$(document).click(function() {
    ...
});

// The code to open the dropdown 
$(".drop-down").click(function() {
    ...
    return false;
});

【讨论】：

【解决方案7】：

尝试类似：

$(document).click(function(event) { 

if($(event.target).parents().index($('.notification-container')) == -1) {
    if($('.notification-container').is(":visible")) {
        $('.notification-container').animate({"margin-top":"-15px"}, 75, function({$(this).fadeOut(75)});
    }   
}        
});

$(".notification-button").click(function(event){
    event.stopPropagation();
    $('.notification-container').show().animate({"margin-top":"0px"}, 75);
});

【讨论】：

奇怪。如果您可以将代码的相关部分发布到jsfiddle.net，那么解决这个问题会容易得多

【解决方案8】：

这是我决定使用的，它是一个不错的小 jQuery 插件，只需要很少的代码。

插件如下： http://benalman.com/projects/jquery-outside-events-plugin/

这是使我的问题中的上述代码起作用的代码。

$(document).ready(function(){
    $(".notification-button").click(function(){
        $('.notification-container').toggle().animate({"margin-top":"0px"}, 75); 
    }); 

    $('.notification-wrapper').bind('clickoutside', function (event) {
        $('.notification-container').animate({"margin-top":"-15px"}, 75, function(){$(this).fadeOut(75)});
    });
});

【讨论】：