1

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

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

我以两种不同的方式对此进行了抨击，这很接近，但我的 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如果没有类，该行会淡出。您可以尝试使用.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);

        }
于 2010-06-21T15:06:39.227 回答