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 のテーブルに border="1" を配置すると、現在コーディングされているトグルがどのように機能するか (または機能しないか) がわかります。

toggle(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();
        }
    );

});
于 2009-08-10T18:01:21.860 に答える
0

トグルはshow（）メソッドを使用し、要素の表示を「ブロック」に設定するため、toggle（）を使用する必要はないと思います。この場合、tr表示を「table-row」に設定するもう少しカスタムなものが必要だと思います。

于 2009-08-10T18:22:55.813 に答える