如何自定义jquery表折叠脚本

Question

我设法使用此脚本获取表格以进行折叠。我试图弄清楚如何只剩下第一行保持扩展而行的剩余部分保持折叠状态。

目前我的脚本已经崩溃了。我无法弄清楚如何指定第一行展开而其余行已折叠。

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$('.container tr:not(.header)').slideToggle(0, function(){});

$('.header').click(function(){
   $(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
    $(this).nextUntil('tr.header').find('tr').slideToggle(0);
    $(this).nextUntil('tr.header').slideToggle(10, function(){});
});
</script>

Answer 1

要获得你想要的东西 - 第一个表是未折叠的，你可以在第一个表中添加一个额外的类，并在文档准备就绪时调用它

$(document).ready(function(){
   $('.first').nextUntil('tr.header').slideToggle(0);
});

看到这个小提琴：http://jsfiddle.net/g67AH/20

您可以使用CSS :not和:first-child选择器。这将确保崩溃的tr元素不是第一个孩子。

$('.header').click(function(){
   $(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
    $(this).nextUntil('tr.header').find('tr:not(:first-child)').slideToggle(0);
    $(this).nextUntil('tr.header:not(:first-child)').slideToggle(10, function(){});
});

另一种选择是为你的表创建一个标题行：

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row1 column 1</td>
            <td>Row1 column 2</td>
            <td>Row1 column 3</td>
            <td>Row1 column 4</td>
        </tr>
    </tbody>
</table>

然后您需要做的只是致电.slideToggle() tbody，您的标题应保持不变。

有关复制这两项建议的示例，请参阅此Fiddle