Javascript 折叠扩展的html表

我以

HTML

表和

jQuery

脚本为例，试图改变这种组合的行为。当前表行在

单击时展开和折叠。如何将其折叠并展开，单击


$（'.header'）。单击（函数（）{
$（this）.toggleClass（'expand'）.nextUntil（'tr.header'）.slideToggle（100）；
});
表格，
tr，
运输署，
th{
边框：1px纯黑；
边界塌陷：塌陷；
}
标题{
光标：指针；
}
.标题.签名：之后{
内容：“+”；
显示：内联块；
}
.header.expand.sign:之后{
内容：“-”；
}

标题
数据
数据
数据
数据
标题
日期
数据
数据
数据
数据
数据
要反转默认状态，只需从
.header
元素中删除
expand
类，并在标准
tr
元素上设置
display:none
。JS逻辑在其他方面是相同的

tr.header{
光标：指针；
显示：表格行；
}
tr{
显示：无；
}

为了实现折叠展开行为，首先隐藏行：

 $('.header').nextUntil('tr.header').hide(); 


$（'.header'）.nextUntil（'tr.header'）.hide（）；
$（'.header'）。单击（函数（）{
$（this）.toggleClass（'expand'）.nextUntil（'tr.header'）.slideToggle（100）；
});
表格，
tr，
运输署，
th{
边框：1px纯黑；
边界塌陷：塌陷；
}
标题{
光标：指针；
}
.标题.签名：之后{
内容：“+”；
显示：内联块；
}
.header.expand.sign:之后{
内容：“-”；
}

标题
数据
数据
数据
数据
标题
日期
数据
数据
数据
数据
数据
请注意，使用JS隐藏内容通常会导致FOUC。在CSS中执行它要好得多