javascript - 单击图像时下拉通过 iframe 链接的第三方表单

Question

基本上，我试图找出最简单的方法来设置图像，以便当用户单击图像时 - 当前在 html 中链接的第三方表单，因为 iframe src=""下拉到所述图像下方，并且然后在再次单击图像时折叠。我尝试过使用 jquery 的不同变体，但我似乎无法弄清楚。我觉得这应该很简单，但我的运气为 0。我看到的任何其他建议都与 YouTube 缩略图和点击播放视频有关，这并不是我真正想要做的。

有什么想法可以实现吗？

提前致谢!

Answer 1

这种带有 vanilla 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>