1

我正在使用与 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();
        }
    )
});
4

2 回答 2

1

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

如果您使用 toggle(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();
        }
    );

});
于 2009-08-10T18:01:21.860 回答
0

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

于 2009-08-10T18:22:55.813 回答