Jquery，如何：点击div之外的任何地方，div淡出

在Jquery中，如果我有一个div，其中包含不同的元素，一个选择，一个搜索输入等，当我点击div之外，在页面上，div淡出，但是我可以点击选择并输入搜索输入而不是淡入淡出？ 任何帮助表示赞赏。 -缺口

Answer 1

Code Duck的答案是不完整的，因为如果你单击DIV本身（仅在外面），你需要让它不淡出。 所以说你应该淡出的DIV有一个ID“菜单”。

jQuery("#menu").click(function(){ return false; }); jQuery(document).one("click", function() { jQuery("#menu").fadeOut(); }); 

使用一个比bind / unbind更简洁。 此外，如果您使用命名空间事件，则实际上并不需要它，因为不需要在文档上显式取消绑定特定的单击处理程序。

返回false只是说“停止将此事件冒泡到文档中”。

Answer 2

许多modal dialog使用部分透明的覆盖，覆盖整个页面，指示对话框具有焦点。 我认为这是实现你想要的最好方法。 如果您真的不希望页面变暗或变灰，您可以始终只使覆盖层完全透明。 有关示例，请查看Facebox 。

Answer 3

我知道这是一个较旧的问题，但这是我写的一个扩展，用于向元素添加clickOutside函数：

 $.fn.extend({ // Calls the handler function if the user has clicked outside the object (and not on any of the exceptions) clickOutside: function(handler, exceptions) { var $this = this; $("body").bind("click", function(event) { if (exceptions && $.inArray(event.target, exceptions) > -1) { return; } else if ($.contains($this[0], event.target)) { return; } else { handler(event, $this); } }); return this; } 

}

有了这个，你可以轻松做到

 $("#menu").clickOutside(function(event, obj) { obj.fadeOut() }); 

Answer 4

 $("#menu").click(function(){ $(document).unbind("click"); $("#menu").show(); $("#menu").bind('mouseout',function(){ $(document).bind("click",function(){$("#menu").fadeOut();}); }); }); 

这应该做..干杯。

Answer 5

试试这个库http://flowplayer.org/tools/expose.html

Answer 6

看一下这个
演示就在这里

 $('#menuBtn').click(function(e) { e.stopPropagation(); $('.navMenuSecWrapper').fadeToggle(); return false; }); $(document).click(function() { $('.navMenuSecWrapper').fadeOut(); }); 

Answer 7

你可以在$(document)上绑定一个click处理程序

 $(document).click(function(){ $(this).unbind('click'); $('#menu').fadeOut(); }