在表格行上使用 jQuery 切换功能使表格本身增长

Question

我正在使用与 1 个表格行的 click() 事件挂钩的 jQuery 切换效果来切换下一行（也恰好是表格中的最后一行）的可见性。如果我连续多次单击触发行，则每次显示切换行时，包含 2 行的表格都会增长一点。

这是我正在使用的 jQuery：

$(document).ready(function() {
    $(".sectionhead").click( function() {
        $(this).next("tr").toggle("150");
    });
});

所以经过几次迭代后，表（其中只有 tr.sectionhead 行可见）非常大。

是否有一种内置方法可以避免这种行为，或者在 jQuery 中是否有某种方法可以比我现在做的更容易？

编辑

ScottE 在下面的回答中建议我的实际解决方案（我不想对我正在切换的 tr 进行分类，并且从一开始就可以看到）：

$(document).ready(function() {
    $(".sectionhead").toggle(
        function() {
            $(this).next("tr").hide();
        },
        function() {
            $(this).next("tr").show();
        }
    )
});

Answer 1

在切换 TR 的不同浏览器之间存在一些奇怪之处。如果您在 FF 的表格中放置一个边框 =“1”，您将看到切换是如何工作（或不工作）的，因为您当前已对其进行了编码。

如果您使用切换（fn，fn），它似乎在 FF 和 IE7 中工作。 IE8 可能是一个不同的故事 - 所以也检查一下。如果是这种情况，jQuery .toggle() not working with TRs in IE 会显示修复。

以下假设 tfoot tr { display: none; } 存在于您的 CSS 中。

$(function() {

    var $tr = $("tfoot tr");

    $(".sectionhead").toggle(
        function() {
            $tr.show();
        },
        function() {
            $tr.hide();
        }
    );

});

Answer 2

我认为您不想使用 toggle()，因为 toggle 将使用 show() 方法并将元素显示设置为“块”。在这种情况下，我认为您想要更多的自定义内容，将 tr 显示设置为“table-row”。