使用JQuery扩展折叠表行

使用JQuery扩展/折叠表行

您可以尝试这种方式：-

给

header

标题行说一个类，使用nextUntil来获取被单击标题下方的所有行，直到下一个标题为止。

JS

$('.header').click(function(){    $(this).nextUntil('tr.header').slideToggle(1000);});

HTML

<table border="0">  <tr  >    <td colspan="2">Header</td>  </tr>  <tr>    <td>data</td>    <td>data</td>  </tr>  <tr>    <td>data</td>    <td>data</td>  </tr>

另一个例子：

$('.header').click(function(){   $(this).find('span').text(function(_, value){return value=='-'?'+':'-'});    $(this).nextUntil('tr.header').slideToggle(100); // or just use "toggle()"});

如果使用动画切换，则在切换完成后，还可以使用promise来切换跨度图标/文本。

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

或仅使用css伪元素来表示扩展/折叠的符号，只需在标头上切换一个类。

CSS：

.header .sign:after{  content:"+";  display:inline-block;      }.header.expand .sign:after{  content:"-";}

JS：-

$(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);