jQuery：當用戶單擊該div上的任何內容時，如何隱藏div。 無覆蓋

Question

我在想.one在這種情況下有用嗎？ 但我不確定該怎么做...

單擊搜索鏈接時，出現一個搜索框。 我希望用戶能夠在不關閉該div的情況下單擊該div中的任何內容，但是當用戶單擊該div之外的任何內容時，該div就會淡出。

Answer 1

嗯，這是一個適用於div的示例 。

它使用了全局變量，所以我並不感到驕傲，但是實現起來很快。

編輯更新了我的代碼，現在沒有全局變量，實現起來仍然很快。

Answer 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();
});

這樣的事情。

Answer 3

您應該將click事件綁定到文檔/正文上：

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中的元素。 並隱藏它。

Answer 4

使用文檔作為單擊。 我們還在mydiv上使用stopPropagation() ，因此任何非mydiv單擊都會使其淡出。

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

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

參見完整示例， 網址為http://jsfiddle.net/FWLF3/1/

Answer 5

我認為這是您想要的解決方案：

<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();})

謝謝。

Answer 6

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

但是這是一個模仿您的需求的jquery代碼片段：

(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();
});})();

我試圖使代碼盡可能具有描述性，以避免對其進行注釋，但是請告知您是否需要注釋。