show/hide 带有 Jquery 的 iframe

Question

我已经创建了 iframe。我希望能够 show/hide 按下按钮时的框架。我找到了这段代码，但源代码没有完全解释如何将 HTML、jquery 和 css 放在一起。我希望它在单击 "button1" 时变为 show/hide。如果有人可以帮助我找到原因，我将不胜感激。

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Subsea Data Analysis Package</title>
  <meta charset="utf-8">
  <meta name="description" content="Subsea Data Analysis Package">
  <meta name="author" content="Viper Subsea Technology Limited">
  <link rel="stylesheet" href="css/styles.css">
    <script type="text/javascript"       src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>


    <script type="text/javascript">
    function hideToggle(button, elem) {
      $(button).toggle(

        function () {
          $(elem).hide();
        },

        function () {
          $(elem).show();
        }
  );
  }
    </script>
  <script type="text/javascript">
  hideToggle(".button1", ".iframe1");

    </script>

  </head>

  <body>

<div class="content">
        <div class="wrapper">
            <div class="container">
      <button class="button1">toggle</button>
      <iframe class="iframe1" src="includes/tree.html"></iframe>

            </div><!--container-->
        </div><!--wrapper-->
    </div><!--content-->

Answer 1

我不知道为什么它过于复杂了。按钮绑定可以简化为：

$(function() {
    $('.button1').on('click', function() {
        $('.iframe1').toggle();
    });
});

解释一下，第一个函数 $(function() {...} 是 shorthand 用于在 DOM 就绪时执行一段代码。这样就可以加载页面内容，并且脚本不会运行在加载项目之前。

第二部分是将 click 事件绑定到按钮 .button1。 function() {...} 部分将被执行 onclick.

第三块切换 .iframe1 的可见性。如果它当前可见，它将变为不可见。如果它不可见，则会发生相反的情况。

show/hide 带有 Jquery 的 iframe

show/hide iframe with Jquery

jquery

show-hide