Question

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

点击搜索链接后会出现一个搜索框。我希望用户能够在没有关闭的情况下点击该div中的任何内容，但是当用户点击该div之外的任何内容时，div会淡出。

Answer 1

嗯，这是example，它适用于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

点击即可使用文档。我们还会在stopPropagation()上使用mydiv，因此点击不是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();
});})();

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

Jquery：如何在用户点击任何内容时隐藏div但是该div。没有叠加

6 个答案:

请参阅http://jsfiddle.net/FWLF3/1/