Question

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

这是我正在使用的jQuery：

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

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

有没有内置的方法可以避免这种行为，或者在jQuery中有哪些方法可以比我正在做的更容易？

修改

我的实际解决方案由ScottE在下面的答案提出（我不想让我开始上课，并且开始时可以看到）：

$(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() 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（）方法并将元素显示设置为'block'。在这种情况下，我想你想要一些更多的自定义，将tr显示设置为'table-row'。

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

2 个答案: