javascript - 防止隐藏的 tr 破坏 td 宽度

Question

我正在折叠表格行并使用 jQuery 来切换它们。但是，当显示隐藏的行时，将重新计算第一个 tr 中的 td 元素的宽度。这是在我的示例中展示的:

$("tr:first").click(function(){
    $(this).next('tr').toggle();
});

tr{
    display: none;
}
tr:first-of-type{
    display: table-row;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
    <tr><td colspan="5">Hello</td><td colspan="3">World</td></tr>
    <tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
</table>

( fiddle ，如果喜欢:http://jsfiddle.net/8u070tkf/)

如何强制隐藏行的流动，但仍切换第二个 tr 的可见性？

Answer 1

你最好切换一个类并设置 visibility CSS 属性:

$("tr:first").click(function(){
    $(this).next('tr').toggleClass('shown');
});

CSS:

tr:not(:first-of-type):not(.shown){
    visibility: hidden;
}

-DEMO-