0

最近、Jquery でこの拡張可能なテーブルを見つけました。これは非常に軽量で素晴らしいコードです。ただし、小さな変更を加える必要がありますが、方法がわかりません。このデモを見てみると、最初の行から 2 番目、3 番目、4 番目の行へとクリックして移動するときに.... 行は拡大し続けます。代わりに、非アクティブな行を縮小する必要があります。つまり、ユーザーが最初の行をクリックしてから 2 番目の行に移動すると、前の行が縮小します。

私はそれが明確であることを望み、コードを提供しますが、ソースコードを見ることができます。それはきちんとしており、ここに完全なチュートリアルがあります.

ありがとう。

OK、これがJsfiddleのコードです: 

    $(document).ready(function(){
        $("#report tr:odd").addClass("odd");
        $("#report tr:not(.odd)").hide();
        $("#report tr:first-child").show();

        $("#report tr.odd").click(function(){
            $(this).next("tr").toggle();
            $(this).find(".arrow").toggleClass("up");
        });
        //$("#report").jExpand();
    });

</p>

4

2 に答える 2

3

クリック ハンドラーを次のように変更します。これにより、選択したものを展開する前にすべてが縮小されます。

$("#report tr.odd").click(function() {
    if ($(this).next("tr").is(":visible")) {
        $(this).next("tr").hide();
        $(this).find(".arrow").removeClass("up");
    } else {
        $("#report tr:not(.odd)").hide();
        $(".arrow").removeClass("up");
        $(this).next("tr").show();
        $(this).find(".arrow").addClass("up");
    }
});

フィドルを見る

于 2012-11-24T15:34:07.233 に答える
2

これは1つのアプローチですが、多少単純化できると思います。

$('#report tbody tr:nth-child(odd)').addClass('odd');
$('#report tbody tr:nth-child(even)').addClass('even').hide();
$('tr.odd').click(
    function(){
        var that = $(this),
            next = that.next('.even');
        that.find('.arrow').toggleClass('up');
        next.toggle().siblings('.even').hide();
        $('.even:not(":visible")').each(
            function(){
                $(this).prev('.odd').find('.up').removeClass('up');
            });
    });

JS フィドルのデモ。

参考文献:

于 2012-11-24T15:41:38.633 に答える