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

【问题标题】：Drop down third party form linked through iframe when image is clicked单击图像时下拉通过 iframe 链接的第三方表单
【发布时间】：2019-01-30 18:28:08
【问题描述】：

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

有什么想法可以做到这一点吗？

提前谢谢你！

【问题讨论】：

标签： javascript jquery html css iframe

【解决方案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>

【讨论】：

像魅力一样工作！非常感谢！
太棒了！正如您可能在代码中看到的那样，秘诀包括：1）当用户单击myImg 时，调用一个函数来切换myIframe 的样式属性的display 属性，以及2）设置position rest-of-page 的样式属性的属性为“绝对”（在相对定位的祖先内），因此在调用函数时整个页面的其余部分不会向下移动，并且 3）使用 top 的属性rest-of-page 的样式属性，如果需要，从其定位的祖先的顶部垂直偏移。
啊！感谢您的解释，非常感谢！