当单击任何位置时，jQuery隐藏下拉菜单，但菜单

我正在尝试使下拉菜单显示您单击按钮时的内容，并隐藏当您单击下拉菜单中的任何位置时隐藏下拉菜单。当单击任何位置时，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); 
     } 
    } 
});

来源

2012-01-10 Dylan Cross

描述你的代码;它将click事件绑定到整个'document'文件，当触发该事件时，它检查目标（clicked）元素是否具有类“.notification-container”的父类，如果是，则检查是否有该类的元素是可见的。如果是这样，它会隐藏（动画）所有具有“.notification-container”类的元素，否则它会显示（动画）它们。 – Stefan 2012-01-10 11:39:13

最好的解决方案是[stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element] [1]。 [1]：http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element – lightofsouls 2013-06-28 08:31:27

嗨，老兄，你能不能接受一个答案？ :) – epoch 2016-05-06 07:08:37

这是我决定使用的，这是一个很好的小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)}); 
    }); 
});

来源

2012-01-10 20:42:08

我经常这样做：

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

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

所以，把你的身体（其他地方）点击下拉点击打开函数内部功能。

来源

2012-01-10 08:48:00

这似乎仍然与我目前的代码相同，奇怪。但是，谢谢 – 2012-01-10 09:00:14

jQuery的closest()功能可以用来看看如果点击是不是在菜单中：

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

来源

2012-01-10 08:48:50 epoch

我无法按预期工作，它的功能与我当前的代码一样 – 2012-01-10 08:59:46

这很简单，效果很好。你可能需要考虑添加点击事件到html而不是body，以防你的页面不能填充视口的全部高度 – 2014-02-28 19:14:15

这个工作很棒:) – mshahbazm 2014-07-31 17:59:22

尝试类似：

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

来源

2012-01-10 08:49:29 redmoon7777

是的，我试过这个，它根本不起作用。 – 2012-01-10 08:55:25

很奇怪。如果你可以在http://jsfiddle.net/上发布你的代码的相关部分，这将更容易计算出 – redmoon7777 2012-01-10 09:31:32

你可以做这样的事情，如果你的产品不点击然后隐藏其下拉列表以防掉落

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

来源

2012-01-10 09:15:26

我以前做过这个，但它从来没有完全正确 – 2012-01-10 20:37:30

尝试th是：

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

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

来源

2012-01-10 09:42:03

这可能不是一个完整的解决方案，但从来就创造了一个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); 
});

来源

2012-01-10 10:19:26 Stefan

这似乎工作，因为它应该在你的小提琴演示中，谢谢。但是我发现了一个完美的插件，代码少了，我会把它作为我的答案发布。 – 2012-01-10 20:39:31

我用一个非常简单的代码，这是： -

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

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

希望这将是有用的。

谢谢！

来源

2013-03-29 10:36:58

当单击任何位置时，jQuery隐藏下拉菜单，但菜单

回答

相关问题