jQuery - 如何隐藏DIV元素只有当点击它外面

问题描述：

我有一个DIV元素，当执行某个动作时出现。为了简单起见，我写了一个非常简单的例程，模仿我遇到的问题。但是，我面临的问题是，当您单击DIV元素内部（并在textarea之外）时，它将无论如何都会隐藏DIV。jQuery - 如何隐藏DIV元素只有当点击它外面

这里是下面的代码：

<body> 
outside div 
<br><br> 

<a href="#" id="wrap_on">make inside appear</a> 
<br><br> 

<div id='wrap' style='background:red;display:none;padding:10px;width:155px'> 
    <textarea id='inside'>inside div</textarea> 
    <div id='inside2'>also inside div -- click me</div> 
</div> 
</body> 

<script> 
$(document).ready(function() { 
    $('#wrap_on').click(function() { 
     $('#wrap').show(); 
     $('#inside').select().focus();  
    }); 

    $('#inside2').click(function() { 
     alert('test'); 
    }); 

    // #inside2 does not work but #wrap does hide 
    $('#wrap').focusout(function() { 
     $('#wrap').hide(); 
    }); 
}); 
</script>

或者你可以在这里鼓捣：http://jsfiddle.net/hQjCc/

基本上，我希望能够点击文本“也在里面格 - 点击我“并弹出警报。但是，.focusout函数正在阻止它的工作。另外，如果您在其外面点击，我想隐藏#wrap DIV。

的可能重复[使用jQuery隐藏DIV当点击外面（http://stackoverflow.com/questions/1403615/use-jquery当你点击它以外的时候） – 2011-02-06 10:17:07

不是重复的 - 我试过这个解决方案，它对我不起作用;除非我做错了什么。这是我的执行：jsfiddle.net/hQjCc/2 – 2011-02-06 10:23:37

hahaha。另一个玩jquery的人。 – 2011-02-06 10:39:48

答

$(document).click(function(e) { 
    var t = (e.target) 
     if(t!= $("#inside").get(0) && t!=$("#inside2").get(0) && t!=$("#wrap_on").get(0)) { 
      $("#wrap").hide(); 
     } 
});

这应该毕竟。

http://jsfiddle.net/hQjCc/4/

答

看到这个其他堆栈溢出问题：Use jQuery to hide a DIV when the user clicks outside of it

jQuery - 如何隐藏DIV元素只有当点击它外面

相关推荐