JQuery 显示和隐藏 iFrame

Posted 2023-05-09

【中文标题】JQuery 显示和隐藏 iFrame

【英文标题】：JQuery Show and Hide an iFrame

【发布时间】：2017-03-14 06:14:07

【问题描述】：

我有这个代码：

<script>
  $(document).ready(function()
  $("a#calculator").click(function()
  $("div#calc_frame").toggle();
);
);
</script>
<p class="form_text" style = "color: #f26522 !important; font-size:12px !important;"> Not sure of the date in either English or Hebrew?<br> Click to show our calculator (will appear to the right) <a href="#" id="calculator">here.</a></p >

定位一个包裹在 iFrame 周围的 DIV：

<div id="calc_frame" style="display:none;">
<iframe src="http://mountsinaiparks.org/digital-yahrzeit/wp-content/themes/yahrzeit-theme/dates2.html" style="width:100%; border:none; min-height:220px; padding-top: 35px;" ></iframe>
</div>

这个方法应该可以在我使用 Bootstrap 查询的情况下工作 - 但事实并非如此。我写错了吗？我希望它用 href 显示和隐藏。

【问题讨论】：

控制台是否有任何错误？

是的，$(document) 不是函数

你确定要导入 jQuery 吗？即<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 3.1.1

似乎因为它是 Wordpress 你必须使用 jQuery(document).ready(function($) );但是 - 它会将用户跳回页面顶部。

跳回页面顶部将是默认的锚点行为，因此将e 参数添加到您的点击处理程序，然后调用e.preventDefault()。

【参考方案1】：

这是我的最终代码：

<script>
jQuery(document).ready(function($) 
$("button").click(function(e)
e.preventDefault();
    $("iframe").toggle();
);
);
</script>

完美运行。