当我在外面点击时如何隐藏DIV元素 [英] How to hide a DIV element when I click outside

问题描述

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

 < div id =mydiv> div必须位于按钮上方< / div> 
 $ b $（'＃mydiv'）。click（function（e）{
 e.stopPropagation（）; 
}）; 
 
 $（document）.click（function（）{
 $（'＃mydiv'）。fadeOut（300）; 
}）; 
  

但它不适合我...

更新

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

DEMO

 < div id =butstyle =text-align：right;>< button type =button>显示Div！< / button> ;< / DIV> 
< div id =mydivstyle =display：none;> div必须位于按钮上方< / div> 
 
 $（＃but button）。click（function（）{
 var pos = $（this）.offset（），
 div = $（＃mydiv ）; 
 
 //在页面外显示所以
 //我们可以测量它
 div.css（{
display：block ，
border：1px纯黑，
position：absolute，
left：-10000，
top：0 
}）; 
 
 //将它移动到我们想要的位置
 div.css（{
left：pos.left  -  40，
 top：pos.top  -  div.height（） -  10 
}）; 
}）; 
 $ b $（'＃myDiv'）。click（function（e）{
 e.stopPropagation（）; 
}）; 
 $（document）.click（function（）{
 $（'＃mydiv'）。fadeOut（300）; 
}）; 
  

解决方案

在javascript 中点击 冒泡事件，它始于 div 并转到文档即可。当您使用 stopPropagation（）函数停止事件传播时，不处理单击文档。因此，要解决您的问题，只需删除 e.stopPropagation（）。

DEMO 1

最好的方法是：

  $（'＃mydiv'）。click（function（e）{
 e.stopPropagation（）; 
 $（this） .fadeOut（300）; 
}）; 
  

DEMO 2

如果我点击这个div，如何让点击外部并隐藏这个div



$ b好​​吧，让我们想象一下，当你点击一个id为wrapperId的容器时，myDiv应该隐藏：

  $（＃wrapperId）。click（function（e）{
 $（'＃ mydiv'）。fadeout（300）; 
}）
  

如果容器是一个文档，你可以使用 $（document）而不是 $（＃wrapperId）。

DEMO 3

它无法正常工作： jsbin.com/ilowi​​j/ 7

单击按钮时应停止单击事件传播。进行这些更改：

  $（＃but button）。click（function（e）{
 e。 stopPropagation（）; 
 ... 
} 
  

DEMO 4

I have a div and want to hide it when I click outside. My code is:

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

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

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

But it is not working for me ...

UPDATE

Full code is presented below. When I click on a button it shows a div above, so I need to hide this div when I click outside.

DEMO

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

解决方案

In javascript click is a bubbling event, it starts on a div and goes up to a document. When you stop an event propagation using a stopPropagation() function, a click on the document is not handled. So, to solve your problem just remove e.stopPropagation().

DEMO 1

The best way is:

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

DEMO 2

If I click on this div, how to make to click outside and hide this div ?

Ok, let's imagine, that when you are clicking on a container with id "wrapperId", "myDiv" should be hidden:

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

if container is a document, you can use $(document) instead of $("#wrapperId").

DEMO 3

It is not working look what is happening: jsbin.com/ilowij/7

You should stop a click event propagation when you are clicking the button. Make these changes:

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

DEMO 4

这篇关于当我在外面点击时如何隐藏DIV元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！