javascript 如果 div 未隐藏，请单击任意位置以隐藏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17058375/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
If div is not hidden click anywhere to hide
提问by Poyi
I am trying to make a div hidden by default and show by clicking a button. To close the div, I can either click on the button or anywhere else on the screen. Below is my attempt but the closing part is not working. I appreciated if anyone can point me to the right implementation or maybe a better way to do this.
我正在尝试默认隐藏 div 并通过单击按钮显示。要关闭 div，我可以单击按钮或屏幕上的任何其他位置。以下是我的尝试，但结束部分不起作用。我很感激是否有人可以为我指出正确的实现方式或者更好的方法来做到这一点。
$('#theDiv').hide();
$("#showDivBtn").click(function(){
$("#theDiv").show();
});
if ( !$('#theDiv:hidden') ) {
$(document).click(function() {
$('#theDiv').hide();
});
$('#theDiv').click(function(e) {
e.stopPropagation();
return false;
});
}
});
回答by adeneo
placing the entire event handler inside a condition only checks the condition on first pageload, and the event handler is probably never attached, try it like this instead :
将整个事件处理程序放在一个条件中，只检查第一个页面加载时的条件，并且事件处理程序可能永远不会被附加，请像这样尝试：
$('#theDiv').hide();
$(document).on('click', function(e) {
if ( $(e.target).closest('#showDivBtn').length ) {
$("#theDiv").show();
}else if ( ! $(e.target).closest('#theDiv').length ) {
$('#theDiv').hide();
}
});
回答by Shinov T
Try this,
试试这个，
$('#theDiv').hide();
$("#showDivBtn").click(function(){
$("#theDiv").toggle();
});
$(document).on("click" , function(event){
if( $(event.target).attr("id") != "theDiv" && $(event.target).attr("id") != "showDivBtn" && $(event.target).parents("#theDiv").attr("id") != "theDiv")
{
$('#theDiv').hide();
}
});
回答by Prakash GPz
try using
尝试使用
if( !$('.theDiv' ).is( ':visible' ) )
if( !$('.theDiv' ).is( ':visible' ) )
instead of
代替
if ( !$('.theDiv:hidden') )
if ( !$('.theDiv:hidden') )
回答by sangram parmar
try this
试试这个
<script type="text/javascript">
$('.opendiv').hide();
$(document).click(function (event) {
var $target = $(event.target);
if ($target.attr('id') == 'addAccordion') {
if ($('.opendiv').is(':hidden')) {
$('.opendiv').show();
}
else {
$('.opendiv').hide();
}
}
else if ($target.closest('.opendiv').length > 0) {
}
else {
$('.opendiv').hide();
}
})
</script>
<div>
<input id="addAccordion" type="button" value="ADD COMMENT" />
</div>
<div id="rs" class="opendiv">
<h2>
Welcome to ASP.NET!
</h2>
<p>
To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">
www.asp.net</a>.
</p>
<p>
You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"
title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
</p>
</div>
回答by sangram parmar
I don't think you can target documentwith a .clickhandler like that.
我不认为你可以document用这样的.click处理程序作为目标。
Rather than making it so you can literally click anywhere to close the DIV, just make it seem that way. Put a clear DIV behind the one that you want to be able to close and make it cover the whole screen. Then you can attach your click handler to that.
与其制作它以便您可以从字面上单击任意位置来关闭 DIV，不如让它看起来如此。在你想要关闭的那个后面放一个清晰的 DIV，让它覆盖整个屏幕。然后你可以将你的点击处理程序附加到它。
HTML:
HTML：
<button>Click me to show the DIV</button>
<div class="container">
<div class="thediv">
<p>I'm the DIV</p>
</div>
</div>
JavaScript:
JavaScript：
$(document).ready(function () {
var $button = $("button");
var $container = $("div.container");
$button.click(function () {
$container.show();
});
$container.click(function () {
$container.hide();
});
});
CSS:
CSS：
div.container {
display: none;
position: fixed;
top: -5%;
left: -5%;
width: 110%;
height: 110%;
}
div.thediv {
position: absolute;
top: 30%;
left: 10%;
background-color: gray;
color: white;
padding-top: 1em;
border-radius: 5px;
width: 50%;
}
p {
background-color: black;
text-align: center;
padding: 2em;
}
For demonstration purposes, I made the background DIV visible in this Fiddle
出于演示目的，我在此 Fiddle 中显示了背景 DIV
