单独或一起展开折叠表格

Question

我需要能够通过按下表的某些部分的按钮来单独展开和折叠该部分，但是如果用户想要查看表中的所有数据，他们可以点击表顶部的一个按钮来展开所有信息。

然后，用户应该仍然能够折叠他们不感兴趣的部分，如果他们随后折叠整个表格，则所有单元格都应该再次折叠。

我已经用两种不同的方式对此进行了重击，这已经很接近了，但我的 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);

                }
            });
        });

    });

Answer 1

代码是做相反的事情吗？在这里，看起来代码正在对类名执行相反的操作。如果没有 collapsed 类，该行就会淡出。您可以尝试仅使用 .toggle 这样 jQuery 就能处理所有事情。

      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);

        }