随地点击关闭菜单

你们可以看到，我有一个下拉菜单。

我有很多列，每个列都有一个打开菜单的选项。

$(".optionCont").live("click", function(){ $(".dropMenuCont").slideUp(); if ($(this).next().css("display") == "none") { $(this).next().slideDown(); } else { $(this).next().slideUp(); } }); 

那么，当我点击页面的任何位置时，如何进行菜单slideUp？

像文档点击一样？

我访问了其他主题，但我不知道为什么，这不起作用。 也许我是以不同的方式做到这一点。

我接受菜单编码中的任何提示。

演示： Jsfiddle

Answer 1

在回调中注册一个一次性处理程序，以确保下一次单击关闭菜单：

 $(".optionCont").live("click", function(ev){ $(".dropMenuCont").slideUp(); if($(this).next().css("display") == "none"){ $(this).next().slideDown(); }else{ $(this).next().slideUp(); } ev.stopPropagation(); $(document).one('click', function() { $(".dropMenuCont").slideUp(); }); }); 

见http://jsfiddle.net/alnitak/GcxMs/

Answer 2

 $(".optionCont").click(function(e){ $(".dropMenuCont").slideUp(); if($(this).next().css("display") == "none"){ $(this).next().slideDown(); }else{ $(this).next().slideUp(); } e.preventDefault(); e.stopPropagation(); return false; }); $(document).click(function() { $(".dropMenuCont").slideUp(); }); 

这是JSFiddle

Answer 3

尝试以下方法：

 $(document).click(function(e) { if ($(e.target) != myEl) myEl.slideUp(); }) 

替代方案： 工作示例 。

资源：

 $(".optionCont").live("click", function(e) { var that = this; $(document).click(function(e) { console.log(e.target); console.log(that); if (e.target != that) { e.stopPropagation(); e.preventDefault(); $(".dropMenuCont").slideUp(); } }); if ($(this).next().css("display") === "none") { $(this).next().slideDown(); } else { $(this).next().slideUp(); } e.stopPropagation(); e.preventDefault(); }); 

Answer 4

只需将点击绑定到

 $('body').click(function() { $(".dropMenuCont").slideUp(); }); $('.dropMenuCont').click(function(e){ e.stopPropagation(); }); 

Answer 5

 $('body').bind("click",function (){ $(".dropMenuCont").slideUp(); }); $('.dropMenuCont').click(function(event){ event.stopPropagation(); }); 

我认为检查某些内容是否隐藏更好的想法是在动画的回调中切换菜单上的类，然后使用hasClass进行检查。