javascript - 默认情况下以折叠方式开始 HTML 行

Question

我已经实现了这个例子的我的版本(使用 Vapor Swift & Leaf)并且它工作正常:Simple example of collapsible rows in HTML/CSS/JS

但是，我希望所有可折叠的行在开始时默认隐藏。我不太了解 JS，但我认为修改它不会有帮助:

$(document).ready(function() {
    $('[data-toggle="toggle"]').change(function(){
        $(this).parents().next('.hide').toggle();
    });
});

我是否需要制作不同的 JS 脚本？如果需要，它将如何找到要隐藏的正确行(以及如何隐藏它们)？

Answer 1

由于您使用的是 jQuery库，您可以使用 jQuery 选择器来选择要隐藏的元素，并在文档加载时隐藏它们:

看起来您想要在隐藏/显示之间切换的行都具有 .hide 类。所以你可以使用它作为选择器:

$('.hide').toggle();  // hide rows initially

运行下面的代码片段，看看它是如何工作的。最初，行是隐藏的。如果您单击“会计”或“管理”，这些行将展开。

$(document).ready(function() {
  $('.hide').toggle();  // hide rows initially
  $('[data-toggle="toggle"]').change(function() {
    $(this).parents().next('.hide').toggle();
  });
});

table {
  width: 750px;
  border-collapse: collapse;
  margin: 50px auto;
}

th {
  background: #3498db;
  color: white;
  font-weight: bold;
}

td,
th {
  padding: 10px;
  border: 1px solid #ccc;
  text-align: left;
  font-size: 18px;
}

.labels tr td {
  background-color: #2cc16a;
  font-weight: bold;
  color: #fff;
}

.label tr td label {
  display: block;
}

[data-toggle="toggle"] {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Regian</th>
      <th>Q1 2010</th>
      <th>Q2 2010</th>
      <th>Q3 2010</th>
      <th>Q4 2010</th>
    </tr>
  </thead>
  <tbody>
    <tbody class="labels">
      <tr>
        <td colspan="5">
          <label for="accounting">Accounting</label>
          <input type="checkbox" name="accounting" id="accounting" data-toggle="toggle">
        </td>
      </tr>
    </tbody>
    <tbody class="hide">
      <tr>
        <td>Australia</td>
        <td>$7,685.00</td>
        <td>$3,544.00</td>
        <td>$5,834.00</td>
        <td>$10,583.00</td>
      </tr>
      <tr>
        <td>Central America</td>
        <td>$7,685.00</td>
        <td>$3,544.00</td>
        <td>$5,834.00</td>
        <td>$10,583.00</td>
      </tr>
    </tbody>
    <tbody class="labels">
      <tr>
        <td colspan="5">
          <label for="management">Management</label>
          <input type="checkbox" name="management" id="management" data-toggle="toggle">
        </td>
      </tr>
    </tbody>
    <tbody class="hide">
      <tr>
        <td>Australia</td>
        <td>$7,685.00</td>
        <td>$3,544.00</td>
        <td>$5,834.00</td>
        <td>$10,583.00</td>
      </tr>
      <tr>
        <td>Central America</td>
        <td>$7,685.00</td>
        <td>$3,544.00</td>
        <td>$5,834.00</td>
        <td>$10,583.00</td>
      </tr>
      <tr>
        <td>Europe</td>
        <td>$7,685.00</td>
        <td>$3,544.00</td>
        <td>$5,834.00</td>
        <td>$10,583.00</td>
      </tr>
      <tr>
        <td>Middle East</td>
        <td>$7,685.00</td>
        <td>$3,544.00</td>
        <td>$5,834.00</td>
        <td>$10,583.00</td>
      </tr>
    </tbody>
  </tbody>
</table>