13

当我点击外部时，我有一个div并想隐藏它。我的代码是：

<div id="mydiv">The div must be above button</div>

    $('#mydiv').click(function(e) {
        e.stopPropagation();
    });

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

但这对我不起作用...

更新

完整代码如下所示。当我点击一个按钮时，它会在上面显示，所以当我点击外面时div我需要隐藏它。div

演示

<div id="but" style="text-align: right;"><button type="button">Show Div!</button></div>
<div id="mydiv" style="display:none;">The div must be above button</div>

$("#but button").click(function(){
  var pos = $(this).offset(),
      div = $("#mydiv");

  // Make it visible off-page so
  // we can measure it
  div.css({
    "display": "block",
    "border": "1px solid black",
    "position": "absolute",
    "left": -10000,
    "top": 0
  });

  // Move it where we want it to be
  div.css({
    "left": pos.left - 40,
    "top":  pos.top - div.height() - 10
  });
});

$('#myDiv').click(function(e) {
    e.stopPropagation();
});
$(document).click(function() {
    $('#mydiv').fadeOut(300);
});
4

9 回答 9

12

在 javascript中，点击是一个冒泡事件，它从一个div开始并上升到一个文档。当您使用stopPropagation()函数停止事件传播时，不会处理对文档的单击。因此，要解决您的问题，只需删除e.stopPropagation().

演示 1

最好的方法是：

$('#mydiv').click(function(e) {
    e.stopPropagation();
    $(this).fadeOut(300);
});

演示 2

如果我单击此 div，如何在外部单击并隐藏此 div？

好的，让我们想象一下，当您单击 id 为“wrapperId”的容器时，应该隐藏“myDiv”：

$("#wrapperId").click(function(e){
  $('#mydiv').fadeOut(300);
})

如果容器是一个文档，你可以使用$(document)而不是$("#wrapperId").

演示 3

它不工作看看发生了什么：jsbin.com/ilowi​​j /7

您应该在单击按钮时停止单击事件传播。进行以下更改：

$("#but button").click(function(e){
    e.stopPropagation();
    ...
}

演示 4

于 2012-12-15T13:05:15.457 回答
8

尝试使用以下检查事件目标的代码

 $(document).click(function(e) {
  if(e.target.id!="mydiv"){  // if click is not in 'mydiv'
    $('#mydiv').hide(3000);
  }
});
于 2012-12-15T13:00:45.503 回答
2

比将点击事件绑定到文档更好，您可以使用这种片段：

看演示

$('#mydiv').click(function(e) {
        e.stopPropagation();
    })
    .css({outline:0})
    .focusout(function(){
         $(this).fadeOut(300);  
    }).focus();
于 2012-12-15T13:06:37.087 回答
1

尝试以下简单的解决方案，它甚至可以递归工作：

$(document).mouseup(function(e) 
{
    var container = $("YOUR CONTAINER SELECTOR");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});
于 2017-09-21T11:12:24.020 回答
0

Why all that just use css3 target

<a href='#login'>Login</a>


<div id='login'>
  blah blah blah
</div>


css:

#login{width:400px;height:600px;background:#fff;margin:10%
       auto;position:absolute;left:0;right:0;
      }

now we will hide the login box by putting a class on it 

<div class='lightbox' id='login'>

</div>

css:

.lightbox{display:none;}
.lightbox:target{display:block;}

thats all the code dont need too use javascript

于 2014-01-09T09:37:59.257 回答
0

检查这个

<a href="#" id="link">Click me</a>
通过单击显示或隐藏我

    (function($) {

  $("#link").click(function(e){
    e.stopPropagation();
    var div = $("#show_hide");

    // Make it visible off-page
    div.css({
      "display": "block"
    });

  });
$(document).click(function(e){
  $('#show_hide').fadeOut(300);
});
})(jQuery);

例如，您可以查看此链接。

检查这个http://jsfiddle.net/x5Env/

于 2013-08-17T09:15:52.133 回答
0

最简单的方法是捕获文档的 onclick 事件。您知道此单击事件发生在您感兴趣的元素之外，然后返回 false。当触发菜单事件之外的单击时，我使用此技巧隐藏弹出菜单。

于 2015-02-15T20:52:19.650 回答
0

$('html').click(function() { $("div").css({"display": "none"}); }); $('.option').click(function(event){ event.stopPropagation(); });

$(".search").keyup(function(){ search=$(".search"); if(search.val()!= "" ) { $("div").css({"display": "block"}); } else { $("div").css({"display": "none"}); } });

  <input type="search" class="form-control search" name="search" autocomplete="off" >

  <div>

  </div>

这将有助于隐藏

于 2016-05-29T21:26:54.640 回答
-1

试试.blur()，像这样：

$('#mydiv').blur(function(e) {
    $(this).fadeOut(300);
});

希望有帮助

于 2012-12-15T13:00:35.630 回答