javascript - 将 'Reveal All' 按钮替换为 'Reveal Less' onClick？

Question

我当前正在表格上使用“全部显示”按钮来显示所有表格条目:

http://jsfiddle.net/SCpgC/

但是，我想知道，有没有办法可以在单击时将“全部显示”切换为显示“较少显示”，以便用户可以返回到之前的 View ？

这是我当前使用的 JavaScript:

var numShown = 2; // Initial rows shown & index

    $(document).ready(function() {
        // Hide rows and add clickable div

        $('table').find('tr:gt(' + (numShown - 1) + ')').hide().end().after('<div class="more">Reveal All</div>');

        $('.more').click(function() {
            var numRows = $(this).prev().find('tr').show();
            $(this).remove();
        })
    });

非常感谢您的指点:-)

Answer 1

这将是双向的...如果显示全部，则显示 div，如果显示较少，则隐藏 div

试试这个

working fiddle here

$('.more').click(function() {
    if ($(this).hasClass("show")) {
        var numRows = $(this).prev().find('tr').show();
        $(this).text('Reveal Less');
        $(this).removeClass('show').addClass('hide');
    }
    else {
        $(this).prev().find('tr:gt(' + (numShown - 1) + ')').hide();
        $(this).removeClass('hide').addClass('show');
        $(this).text('Reveal All');
    }
});

并使用一些效果fadeIn()和fadeOut()

fiddel with effect