Javascript 单击菜单以外的任何位置时，jQuery 隐藏下拉列表

jQuery hide dropdown when clicked anywhere but menu

提问by Dylan Cross

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

采纳答案by Dylan Cross

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

回答by epoch

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

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

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

回答by Bipin Chandra Tripathi

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

回答by Vishnu Choudhary

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!!

谢谢！！

回答by Kristoffer Svanmark

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.

所以把你的身体（其他地方）点击功能放在下拉打开点击功能中。

回答by Mandeep Pasbola

Try this :

尝试这个 ：

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

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

回答by Stefan

This might not be a complete solution but I′ve created a demoto 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);
});

回答by redmoon7777

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