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

Question

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

这是我正在使用的 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 的表格中放置 border="1"，您将看到切换如何工作（或不工作），就像您当前编码的那样。

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

以下假设 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”。