Jquery：当用户单击除该 div 之外的任何内容时如何隐藏 div。无叠加答案

【问题标题】：Jquery: How to hide a div when user clicks on anything BUT that div. No overlayJquery：当用户单击除该 div 之外的任何内容时如何隐藏 div。无叠加
【发布时间】：2011-04-05 06:19:41
【问题描述】：

我在想.one 在这种情况下有用吗？但我不知道该怎么做......

我点击搜索链接时会出现一个搜索框。我希望用户能够单击该 div 中的任何内容而不关闭它，但是当用户单击该 div 之外的任何内容时，该 div 会淡出。

【问题讨论】：

标签： javascript jquery bind

【解决方案1】：

呃，这是一个在 div 上工作的 example。

它使用全局变量，所以我并不感到自豪，但它的实施速度很快。

编辑更新了我的代码，现在没有全局变量，实现起来还是很快的。

【讨论】：

【解决方案2】：

也许在该任务的搜索框输入中使用blur 事件？

$('div.search').find('input').blur(function() {
    $('div.search').hide();
    $('a#search').show();
});

$('a#search').click(function() {
   var $a = $(this);
   $a.hide();
   $('div.search').show();
});

类似的东西。

【讨论】：

【解决方案3】：

点击即可使用文档。我们还在mydiv 上使用stopPropagation()，因此任何不是mydiv 的点击都会使其淡出。

$('button, .mydiv').click(function(e) {
    e.stopPropagation();
    $('.mydiv').slideDown();
})

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

查看完整示例http://jsfiddle.net/FWLF3/1/

【讨论】：

【解决方案4】：

我认为这是您想要的解决方案：

<div id="hi" style="height:100px; width:100px;border:1px solid #ddd"></div>

$('*',document.body).click(function(e){
e.stopPropagation();
var dom = $(this).get(0);
if($.trim(dom.id) != 'hi')
    $('#hi').hide();})

谢谢。

【讨论】：

【解决方案5】：

完整答案演示位于： http://jsfiddle.net/leonxki/kSarp/

但这里有一个模仿您要求的 jquery 代码 sn-p：

(function toggleSearchField() {
var $searchBoxDiv = $('#searchBoxContainer');

$(document).bind('click', function(evnt) {
    var $target = $(evnt.target);

    if ($target.is('#toggleSearchOn')) {
        $searchBoxDiv.fadeIn();
        return;
    } else if ($target.is('#searchBoxContainer') || $searchBoxDiv.has(evnt.target).length) {
        return;
    }

    $searchBoxDiv.hide();
});})();

我试图使代码尽可能具有描述性以避免对其进行注释，但如果您需要注释，请告诉我。

【讨论】：

【解决方案6】：

你应该在文档/正文上绑定点击事件：

var thediv = $("#thediv.youwant");

// sluit resultaten met document click - niet wanneer op sayt-container wordt geklikt
$(document).click(function(e){
  if(e.target.id != thediv.attr("id") && $(e.target).parents(thediv.selector).length == 0) 
  {
    thediv.hide();
  }
});

您必须稍微调整一下 $(e.target).parents(thediv.selector).length == 0) 部分，它仍然非常适合我的情况。

这段代码检查（文档 onclick）目标是否不是 div，而不是该 div 中的元素。并将其隐藏起来。

【讨论】：

但它不会在用户每次点击文档时运行检查吗？