0

我正在使用 tbody 标记对表格行进行分组，以便一次显示和隐藏多行。当第二个<tbody> 没有背景颜色时，切换动画效果很好，但是一旦我添加一个，背景颜色就会暂时与边框重叠，然后再跳回正确的位置。这产生了使边界在重新出现之前有效消失的不良效果。

这是 JS Fiddle 中的一个示例。

这是 table 标记内的结构：

<tbody class='tbody1'>
    <tr class='tr1'>
        <td>Test1</td>
        <td>Test2</td>
        <td>Test3</td>
        <td>Test4</td>
    </tr>
</tbody>
<tbody class='tbody2'>
    <tr class='tr2'>
        <td>Test1</td>
        <td>Test2</td>
        <td>Test3</td>
        <td>Test4</td>
    </tr>
    <tr class='tr3'>
        <td>Test1</td>
        <td>Test2</td>
        <td>Test3</td>
        <td>Test4</td>
    </tr>
</tbody>

CSS：

body{
    background-color: rgb(228, 228, 228);;
}
table{
    border-collapse: collapse;
    border-spacing: 0;
}
.tbody{
    border: 1px solid rgba(0,0,0,0); /* to prevent border sizing inconsistency */
    background-color: rgb(243,243,243);
}
.tbody1 {
    border: 1px solid green;
}
.tbody2{
    display: none;
    border: 1px solid black;
}

jQuery：

$('.tbody1').click(function(){
    $('.tbody2').toggle(1000);
});
4

0 回答 0