javascript - 默认折叠 HTML 表格行

Question

我正在使用来自 this 的轻微修改回答使标题行在 HTML 表格中可折叠。

我想修改 JS 代码段，以便在默认情况下折叠而不是展开行(在页面加载/文档准备就绪时)。我该怎么做？

基本上我想要实现的是:

$(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
$(this).nextUntil('tr.header').slideToggle(100, function(){

除了在单击和切换标题行时之外，在页面加载/刷新时运行一次。

我知道我需要更改两个标签 <span>+</span>在 HTML 中，但我坚持如何在页面加载时触发此行为。

---

Javascript:

$(document).ready(function(){
    $('tr.header').click(function(){
        $(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
        $(this).nextUntil('tr.header').slideToggle(100, function(){
        });
    });
});

HTML:

<table border="0">
  <tr  class="header">
      <th colspan="2">Header <span>-</span></th>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr  class="header">
    <th colspan="2">Header <span>-</span></th>
  </tr>
  <tr>
    <td>date</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
</table>

CSS:

table, tr, td, th
{
    border: 1px solid black;
    border-collapse:collapse;
}
tr.header
{
    cursor:pointer;
}

JSFiddle:https://jsfiddle.net/mkb39x0u/

Answer 1

似乎您只是在 document.ready 中执行此操作:

$('tr:not(.header)').hide();

Demo

此外，我可能会使用行上的类和 CSS 来切换加号和减号字符的可见性，而不是用它来弄乱您的脚本。