单击任何地方但菜单时，jQuery隐藏下拉列表

I'm trying to make it so that my dropdown menu shows when you click a button, and hides when you click anywhere except the dropdown menu.

我正在尝试将其设置为当您单击按钮时显示我的下拉菜单，并且当您单击除下拉菜单之外的任何位置时隐藏该隐藏菜单。

I have some code working, as far as not closing when you click the menu, however when you click the document when the menu is closed, it shows the menu, so it continuously toggles no matter where you click.

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

$(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);
        }
    }
});

8 个解决方案

#1

jQuery's closest() function can be used to see if the click is not within the menu:

jQuery的nearest（）函数可用于查看单击是否不在菜单中：

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

#2

you can do something like this if your item is not clicked then hide its dropping list in case of drop down

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

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

#3

I am using a very simple code for this as :-

我正在使用一个非常简单的代码： -

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

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

Hope it will useful.

希望它会有用。

Thanks!!

谢谢！！

#4

I usually do like this:

我通常喜欢这样：

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

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

So put your body (elsewhere) click function inside the drop-down open click function.

所以把你的身体（别处）点击功能放在下拉打开点击功能中。

#5

This might not be a complete solution but I´ve created a demo to help you out. Let me know it´s not working as you´d expect.

这可能不是一个完整的解决方案，但我已经创建了一个演示来帮助您。让我知道它没有像你期望的那样工作。

$(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

Try this :

尝试这个：

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

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

#7

try something like:

尝试类似的东西：

$(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);
});

#8

This is what I've decided to use, it's a nice little jQuery plugin that works with little code.

这是我决定使用的，它是一个很好的小jQuery插件，可以使用很少的代码。

Here's the plugin: http://benalman.com/projects/jquery-outside-events-plugin/

这是插件：http：//benalman.com/projects/jquery-outside-events-plugin/

This is the code that makes my above code in my question work.

这是在我的问题中使我的上述代码工作的代码。

$(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)});
    });
});

#1