Question

基本上，我正在尝试找出设置图像的最简单方法，以便当用户单击图像时-当前在html中链接为iframe src =“”的第三方表单会在该图像下方显示，然后在再次单击图像时崩溃。我尝试使用jquery进行其他变体，但似乎无法弄清楚。我觉得这应该很简单，但我的运气为0。任何我见过已涉及到YouTube缩略图和播放上点击一个视频是不是真的什么我希望做其他建议。

有什么想法可以实现这一目标吗？

提前谢谢！

Answer 1

使用香草JS的这种模式符合您的规格。
可能可以通过jQuery进行增强（例如，我知道jQuery具有.toggle方法和.slideDown方法）。

function toggleIframe(){
  const frame = document.getElementById("myIframe");
  if(frame.style.display != "block"){ frame.style.display = "block"; }
  else{ frame.style.display = "none"; }
}

#container{ position: relative; }
#myImg{ height: 100px; width: 300px; border: solid 1px gray; }
#myIframe{ height: 100px; width: 300px; border: solid 1px gray; display: none; }
#rest-of-page{ position: absolute; top: 100px; height: 200px; width: 500px; border: solid 1px gray; }

<div id="container">
  <div id="myImg" onclick="toggleIframe()">img</div>
  <div id="myIframe">iframe</div>
  <div id="rest-of-page"><br/><br/>rest of page</div>
</div>

下拉通过iframe的连接第三方的形式被点击图像时

1 个答案: