Question

这是我的代码

  <script>
  $(document).ready(function(){
      $("button").click(function(){
          $("table").toggle();
        });
      });
  </script>

<!--Technical Specifications Button Code-->

  <div class="w3-center">
    <button class="w3-button w3-padding-large w3-light-grey" style="margin-top:64px; margin-bottom:64px">TECHNICAL SPECIFICATIONS</button>
  </div>

<!--Technical Specifications Table Design-->

    <head>
    <style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
        background-color: white;
        border-radius: 25px;
    }
    th, td {
        padding: 5px;
    }
    th {
        text-align: center;
    }
    </style>
    </head>

<!--Technical Specifications Table-->

    <table class="table table-hover" style="width:100%">

我不知道是否应该使用＆＃34; display：none＆＃34;以我的风格或如果我应该创建一个允许隐藏和取消隐藏代码的功能。我希望这一点尽可能简单，只需对我的代码进行最少的修改。

Answer 1

display: none可以在一开始就隐藏你的桌面。见例：

$(document).ready(function() {
  $("button").click(function() {
    $("table").toggle();
  });
});

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
  background-color: white;
  border-radius: 25px;
}

th,
td {
  padding: 5px;
}

th {
  text-align: center;
}

#t1 {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="w3-center">
  <button class="w3-button w3-padding-large w3-light-grey" style="margin-top:64px; margin-bottom:64px">TECHNICAL SPECIFICATIONS</button>
</div>

<table class="table table-hover" style="width:100%" id="t1">
  <tr>
    <td>hi</td>
  </tr>
</table>

Answer 2

使用此按钮

<button id="myButton" class="w3-button w3-padding-large w3-light-grey" style="margin-top:64px; margin-bottom:64px">TECHNICAL SPECIFICATIONS</button>

将此添加到您的css

table { display: none; }

并使用这些

$("#myButton").click(function(){
      $("#myTable").toggle();
    });
  });

单击按钮显示表格

2 个答案: