Html 单击后显示 div 并在单击外部时隐藏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16193424/
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
Show div once clicked and hide when clicking outside
提问by rizzledon
I'm trying to show the #subscribe-pop div once a link is clicked and hide it when clicking anywhere outside it. I can get it to show and hide if I change the:
我试图在单击链接后显示 #subscribe-pop div，并在单击它之外的任何地方时隐藏它。如果我更改以下内容，我可以让它显示和隐藏：
$('document').click(function() {
TO
到
$('#SomeOtherRandomDiv').click(function() {
HTML:
HTML：
<div id="footleft">
<a href="#" onclick="toggle_visibility('subscribe-pop');">Click here to show div</a>
<div id="subscribe-pop"><p>my content</p></div>
</div>
Script:
脚本：
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById("subscribe-pop");
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
}
$('document').click(function() {
$('#subscribe-pop').hide(); //Hide the menus if visible
});
$('#subscribe-pop').click(function(e){
e.stopPropagation();
});
</script>
回答by Luigi Siri
You have to stop the event propagation in your container ('footleft' in this case), so the parent element don't notice the event was triggered.
您必须停止容器中的事件传播（在本例中为“footleft”），因此父元素不会注意到事件已被触发。
Something like this:
像这样的东西：
HTML
HTML
<div id="footleft">
<a href="#" id='link'>Click here to show div</a>
<div id="subscribe-pop"><p>my content</p></div>
</div>
JS
JS
$('html').click(function() {
$('#subscribe-pop').hide();
})
$('#footleft').click(function(e){
e.stopPropagation();
});
$('#link').click(function(e) {
$('#subscribe-pop').toggle();
});
See it working here.
看到它在这里工作。
回答by KevinIsNowOnline
I reckon that the asker is trying to accomplish a jquery modal type of display of a div.
我认为提问者正试图完成一个 div 的 jquery 模式类型的显示。
Should you like to check this linkout, the page upon load displays a modal div that drives your eye into the center of the screen because it dims the background.
如果您想查看此链接，加载时的页面会显示一个模态 div，它将您的眼睛吸引到屏幕中央，因为它会使背景变暗。
Moreover, I compiled a short jsFiddlefor you to check on. if you are allowed to use jquery with your requirements, you can also check out their site.
此外，我编写了一个简短的jsFiddle供您查看。如果您被允许根据您的要求使用 jquery，您还可以查看他们的网站。
Here is the code for showing or hiding your pop-up div
这是显示或隐藏弹出式 div 的代码
var toggleVisibility = function (){
if($('#subscribe-pop').is(":not(:visible)") ){
$('#subscribe-pop').show();
}else{
$('#subscribe-pop').hide();
}
}
回答by techfoobar
Changing $(document).click()to $('html').click()should solve the main problem.
更改$(document).click()为$('html').click()应该可以解决主要问题。
Secondly, you do not need the toggle_visibility()function at all, you can simply do:
其次，您根本不需要该toggle_visibility()功能，您可以简单地执行以下操作：
$('#subscribe-pop').toggle();
Ref: changed bodyto htmlas per this answer: How do I detect a click outside an element?
参考文献：改body到html按这样的回答：如何检测一个元素之外的点击？
