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

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

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

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

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

希望它会有用。

谢谢！！

Answer 4

我通常喜欢这样：

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

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

Answer 5

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

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

Answer 6

试试这个 ：

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

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

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