Html 我想让 iframe 默认隐藏并在点击时显示（图像）。
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24130231/
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
I want to make an iframe hidden by default and to be shown onclick (of an image).
提问by Antonis Oulis
But with what I have done, if I make the display mode : none or block then I cant make it shown on click.
但是根据我所做的，如果我将显示模式设为：无或阻止，则无法在单击时显示。
Also when I click on the show/hide image it scrolls at the beginning of the page, instead of staying at the same place and showing the iframe.
此外，当我单击显示/隐藏图像时，它会在页面开头滚动，而不是停留在同一位置并显示 iframe。
Any help for that?
有什么帮助吗？
With that below I made the show/hide function
下面我做了显示/隐藏功能
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#on").click(function(){
$("map").show();
});
$("#off").click(function(){
$("map").show();
});
});
</script>
I frame and image are:
I帧和图像是：
<div id="show/hide" align="center">
<a href="#" id="on">
<img src="http://icons.iconarchive.com/icons/double-j-design/apple-festival/256/app-map-icon.png" width="80" height="80">
</a>
<div id="map" style="display:block ;">
<iframe src="https://mapsengine.google.com/map/embed?mid=zkhFhUgoi5X4.kL86cmKz_OL8" height="300px" width=" 100%" ></iframe>
</div>
回答by Flak DiNenno
Your page is scrolling because display:noneactually "deletes" the iframe from the DOM, which using a CSS style of visibility: hidden;would leave the iframe in place, but just hide it.
您的页面正在滚动，因为display:none实际上从 DOM 中“删除”了 iframe，使用 的 CSS 样式visibility: hidden;会将 iframe 留在原位，但只是将其隐藏。
If that's what you would like to do then use the following (notice the visibility:hiddenstyle):
如果这就是您想要做的，请使用以下内容（注意visibility:hidden样式）：
HTML
HTML
<div id="map" style="display:block; visibility:hidden">
<iframe src="https://mapsengine.google.com/map/embed?mid=zkhFhUgoi5X4.kL86cmKz_OL8" height="300px" width=" 100%" ></iframe>
</div>
You can choose to use display: block, or any other display style you want -- just DO NOTuse display: none, as it will act as if it REMOVESthe object from the DOM.
您可以选择使用display: block，或您想要的任何其他显示样式——只是不要使用display: none，因为它的行为就像从 DOM 中删除对象一样。
JavaScript:
JavaScript：
$(document).ready(function(){
$("#on").click(function(){
if ( $("map").css('visibility') = 'hidden') {
$("map").css('visibility') = 'visible';
}
else {
$("map").css('visibility') = 'hidden';
}
});
});
回答by lindsay
回答by AverageGuy
I believe this will fork for you if you place the # in front of the id in your jquery command:
如果您将 # 放在 jquery 命令中的 id 前面，我相信这会为您分叉：
$("#map").show() and $("#map").hide()
$("#map").show() 和 $("#map").hide()
Also, you have called .show() on both functions. I would assume on your second you would like to call .hide()
此外，您已经在这两个函数上调用了 .show()。我假设你第二次想调用 .hide()
