Question

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

然后使用仍然可以折叠他们不感兴趣的部分，如果它们然后折叠整个表，则所有单元格应该再次折叠。

我用两种不同的方式给了这个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);

                }
            });
        });

    });

Answer 1

代码是否正好相反？就在这里，看起来代码与classname相反。如果没有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);

        }

单独和一起展开折叠表

1 个答案: