Jquery如何实现：点击div外任意位置，使div渐隐消失。

Question

在Jquery中，如果我有一个包含不同元素的div，例如select、搜索输入框等，在我点击页面上div之外的位置时，如何使div淡出，但我仍然可以点击select并在搜索输入框中输入而不会消失？感谢您的帮助。 -nick

- ExodusNicholas

Answer 1

Code Duck的答案不完整，因为如果您单击DIV本身（仅限外部），则需要使其不逐渐消失。 所以假设您的“menu” DIV应该淡出。

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

one 的使用比 bind/unbind 更加简洁。如果使用 one，则不需要显式地从文档中解绑特定的 click 处理程序，因此这里并不真正需要命名空间事件。 return false 只是表示“停止冒泡此事件到文档”。

- jpsimons

---

不错，运行得很好！但是难道没有比每次用户点击文档时都进行检查更好的方法吗？所以如果我在屏幕上随机点击，那么就会触发该函数，对吧？ 也许现在还为时过早，但我不理解你的代码是如何工作的，但它确实可以……嗯嗯。 - ExodusNicholas

不，当您打开菜单时，您调用此代码。 "One"表示它只触发一次，然后解除绑定。在菜单关闭后，您可以随意单击任何位置，没有任何绑定或调用。 - jpsimons

嘿，伙计，我之前这个是好的，然后我的硬盘坏了，我什么都丢了。我正在尝试重新构建它，但是无论我对这段代码做了什么，现在都不起作用了，这应该是最终的代码吗？ <code> $（document）.click（function（）{ jQuery（“#menu”）.click（function（）{ return false; }）; jQuery（document）.one（“click”，function（）{ jQuery（“#menu”）.fadeOut（）; }）; }） </code> 第一次点击除DIV本身以外的任何东西时它可以工作，但第二次这样做时，它就无法淡出了 - ExodusNicholas

是的，我发布的那段代码需要在每次打开 div 时运行。就像这样：var d = openSomeDiv(); d.click(...); jQuery(document).click(...); - jpsimons

一个更符合 jQuery 习惯的方法是使用 jQuery("#menu").click(function(ev){ ev.stopPropagation(); }); - JAL

Answer 2

我知道这是一个比较旧的问题，但是我写了一个扩展来为元素添加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() });

- jlorich

Answer 3

许多模态对话框使用部分透明的覆盖层来覆盖整个页面，表示对话框具有焦点。我认为这是实现您想要的最好方法。如果您真的不想使页面变暗或变灰，您可以将覆盖层完全设为透明。请查看Facebox进行示例。

- Zach B

Answer 4

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

这应该可以做到...干杯。

- Mithun Karmakar

Answer 5

看这里
演示在此

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

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

- Suresh Pattu

Answer 6

你可以像这样在 $(document) 上绑定一个点击处理函数。

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

- JAL

---

我对bind的使用不是很熟悉。你的代码是否意味着，如果单击具有“close_menu”类的元素，则“#menu”会淡出？我不希望用户必须单击关闭按钮或类似的东西，我只想在用户单击该div之外时淡出它。 - ExodusNicholas

click.close_menu 不是关于 CSS 类的，它是一个命名绑定。我本可以只放置 'click'，或使用 .click 方法。我将编辑它以使其更清晰。click 被绑定到整个文档。 - JAL

这会不会使菜单淡出，即使我点击了菜单本身？ - ExodusNicholas

是的，那天我感觉不太好。这来自一个项目，我建了一个下拉菜单，所以它应该在你点击菜单或菜单外部时关闭。对我们有用，可能不适用于你的问题。我非常推荐Dark Porter的答案。这就是我的意思，但修复了一些问题。 - JAL

实际上，如果在菜单元素上放置一个ev.stopPropagation（）的话，它不会随着菜单点击而消失。 - JAL