1

テーブルの特定のセクションをそのセクションのボタンを押して個別に展開および折りたたむことができる必要がありますが、ユーザーがテーブル内のすべてのデータを表示したい場合は、テーブルの上部にある1つのボタンを押してすべての情報を展開します。

使用すると、関心のないセクションを折りたたむことができるはずです。その後、テーブル全体を折りたたむと、すべてのセルが再び折りたたまれます。

私はこれに2つの異なる方法でbashを与えました、そしてこれは近いです、しかし私のlogixは私に失敗します。ご覧いただければ幸いです。

$(function () {
        var collapseIcon = 'images/btn-open.gif';
        var collapseText = 'Collapse this section';
        var expandIcon = 'images/btn-closed.gif';
        var expandText = 'Expand this section';

        var $tableNum = 0;

        $(".openCloseBtn").each(function (i) {
            var $section = $(this);
            $tableNum = i + 1
            $($section).attr('src', collapseIcon)
            .attr('alt', collapseText)
            .addClass('clickable')
            .click(function () {
                if ($section.is('.collapsed')) {
                    $section.removeClass('collapsed');
                    $(this).attr('src', collapseIcon)
                    .attr('alt', collapseText);
                    $('.table' + i).fadeOut("slow");
                }
                else {
                    //alert('i = ' + i)
                    $section.addClass('collapsed');
                    $('.table' + i).fadeIn("slow");
                    $(this).attr('src', expandIcon)
                    .attr('alt', expandText);

                }

            });

        });

        $('#ViewAll').click(function () {
            $(".openCloseBtn").each(function (i) {
                var $section = $(this);
                if ($section.is('.collapsed')) {
                    $section.removeClass('collapsed');
                    $(this).attr('src', collapseIcon)
                    .attr('alt', collapseText);
                    $('.table' + i).fadeOut("slow");
                }
                else {
                    //alert('i = ' + i)
                    $section.addClass('collapsed');
                    $('.table' + i).fadeIn("slow");
                    $(this).attr('src', expandIcon)
                    .attr('alt', expandText);

                }
            });
        });

    });
4

1 に答える 1

0

コードは逆になっていますか？ここでは、コードがクラス名で逆のことをしているように見えます。collapsedクラスがない場合、行はフェードアウトします。.togglejQueryがすべてを処理するように使用してみてください。

      if ($section.is('.collapsed')) {
            $section.removeClass('collapsed');
            $(this).attr('src', collapseIcon)
            .attr('alt', collapseText);
            $('.table' + i).fadeOut("slow");
        }
        else {
            //alert('i = ' + i)
            $section.addClass('collapsed');
            $('.table' + i).fadeIn("slow");
            $(this).attr('src', expandIcon)
            .attr('alt', expandText);

        }
于 2010-06-21T15:06:39.227 に答える