Question

在Jquery中我将如何制作它，以便如果我有一个div，其中包含不同的元素，一个选择，一个搜索输入等，当我在div外部点击时，在页面上，div会消失out，但是我可以点击选择并输入搜索输入而不是褪色？任何帮助表示赞赏。 -nick

Answer 1

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

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

使用一个比bind / unbind更简洁。如果你使用 one ，那么这里也不需要命名空间事件，因为不需要在文档上显式取消绑定特定的点击处理程序。

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

Answer 2

许多模态对话框使用覆盖整个页面的部分透明覆盖，表示对话框具有焦点。我认为这是实现你想要的最佳方式。如果您真的不希望页面变暗或变灰，您可以始终只使覆盖完全透明。有关示例，请查看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

检查出来 Demo is here

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

$(document).click(function() {
    $('.navMenuSecWrapper').fadeOut();
});

Answer 6

您可以在$(document)上绑定点击处理程序，例如

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

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

6 个答案: