我想让 iframe 默认隐藏并在点击时显示（图像）。

Question

但是根据我所做的，如果我将显示模式设为 : none 或 block ，那么我无法让它在点击时显示。

此外，当我单击显示/隐藏图像时，它会在页面开头滚动，而不是停留在同一位置并显示 iframe。

有什么帮助吗？

下面我做了显示/隐藏功能

    <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帧和图像是：

<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>

Answer 1

您的页面正在滚动，因为display:none实际上从 DOM 中“删除”了 iframe，它使用的 CSS 样式为visibility: hidden;会将 iframe 留在原处，但只是将其隐藏。

如果这就是您想要做的，请使用以下内容（注意 visibility:hidden样式）：

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>

您可以选择使用display: block，或您想要的任何其他显示样式——只是不要使用display: none，因为它会像删除一样从 DOM 中对象一样。

JavaScript：

$(document).ready(function(){

  $("#on").click(function(){
    if ( $("map").css('visibility') = 'hidden') {
      $("map").css('visibility') = 'visible';
    }
    else {
      $("map").css('visibility') = 'hidden';
    }
  });

});