代码之家 › 专栏 › 技术社区 › Narwhal

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

html-table css html javascript

Narwhal · 技术社区 · 5 年前

我已经实现了这个示例的版本(使用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脚本,如果需要,它将如何找到要隐藏的正确行(以及如何隐藏它们)?

1 回复 | 直到 5 年前

JoshG 5 年前

因为你在使用 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>