Question

我创建了iframe。我希望能够在按下按钮时显示/隐藏框架。我找到了这段代码，但是源代码并没有完全解释如何将HTML，jquery和css放在一起。我希望它在点击＆＃34; button1＆＃34;时显示/隐藏。如果有人能帮助我找到我会欣赏的原因。

<!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() {...}是在DOM就绪上执行一大块代码的简写。这样就可以加载页面内容，并且在加载项目之前脚本不会运行。

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

第三部分切换.iframe1的可见性。如果它当前可见，它将使其不可见。如果它不可见，则会发生反转。

用Jquery显示/隐藏iframe

1 个答案: