jQuery slideToggle正在添加空白区域

时间:2014-08-27 15:59:24

标签: javascript jquery html css slidetoggle

我在StackOverflow上发现了几个类似的问题,但我无法为自己找出解决方案。

当您重复展开和折叠表格时,它会在表格的顶部添加空行。如何消除这种行为?

在我的小提琴上最容易看到:My Code

这是我的jQuery

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

这是CSS:

tr.header {
    cursor:pointer;
}

这是html(为了问题缩短了):

<table align="center">
<tr class="header">
    <td colspan="6" style="text-align:center;font-weight:bold">20 Accounts are Uninsured - Click to Expand</td>
</tr>
<tr style="display: none;">
    <td width="120">Account Number</td>
    <td width="200">Borrower</td>
    <td width="200">CoBorrower</td>
    <td width="220">Vehicle</td>
    <td width="110">VIN</td>
    <td width="120" align="center">View Policy Info</td>
</tr>
<tr style="display: none;">
    <td>
        <div align="center">46546</div>
    </td>
    <td>Jerry Junko</td>
    <td></td>
    <td>2004 Ford F-250 SD</td>
    <td>4SD65S46D4S6D</td>
    <td style="text-align:center"><a href="">View</a>

    </td>
</tr>
</table>

1 个答案:

答案 0 :(得分:2)

嗯,非常棘手,但我发现这个问题属于你所指的jQuery,即1.6.4。一旦你改变它,你将不再看到这个小故障。

我建议您使用1.11.x或2.x.x的最新版本。这些库具有非常好的性能优化和新的API和功能集。 jQuery 1.6.4相当陈旧。

工作小提琴:http://jsfiddle.net/6u0580jq/2/