javascript - 如何使用切换仅显示少数？

Question

我有这个带有标记和一些 jquery 的工作 jsfiddle。

这很好用。但我想用一张 table 做同样的事情(切换)。正如您在这个工作 fiddle 中看到的那样，它一开始只显示了一些信息，但是当您单击该按钮时，它会显示更多信息。我怎样才能用 table 做同样的事情？

<section class="row-fluid">
    <!-- Price example section start -->
    <div class="innerAreaWithHeading innerAreaBottom padding span8 offset2 toggleContent">

        <h2 class="text-center h1">Header</h2>
        <p class="big">
            Text
        </p>

        <div class="nsRow innerAreaTop innerAreaBottom border-gray">
            <div class="nsSpan6">
                <div class="padding">
                    <h3 class="text-center">Header</h3>
                    <p class="price text-center text-pink xl">
                        Text
                    </p>
                </div>

            </div>
            <div class="nsSpan6">
                <div class="bg-gray padding priceBox">
                    <h3 class="text-center">Header</h3>
                    <p class="price text-center text-turquoise xl">
                        Text
                    </p>
                    <div class="priceTriangleDown"></div>
                </div>
            </div>
        </div>
        <!-- Toggle hide/show content -->
        <div class="nsRow innerAreaTop innerAreaBottom border-gray priceExaples" style="display: none;">
            <div class="nsSpan6">
                <div class="padding">
                    <h3 class="text-center">Header</h3>
                    <p class="price text-center text-pink xl">
                         Text
                    </p>
                </div>

            </div>
            <div class="nsSpan6">
                <div class="bg-gray padding priceBox">
                    <h3 class="text-center">Header</h3>
                    <p class="price text-center text-turquoise xl">
                        Text
                    </p>
                    <div class="priceTriangleDown"></div>
                </div>
            </div>
        </div>

        <div class="nsRow innerAreaTop innerAreaBottom border-gray priceExaples" style="display: none;">
            <div class="nsSpan6">
                <div class="padding">
                    <h3 class="text-center">Header</h3>
                    <p class="price text-center text-pink xl">
                        Text
                    </p>
                </div>

            </div>
            <div class="nsSpan6">
                <div class="bg-gray padding priceBox">
                    <h3 class="text-center">Header</h3>
                    <p class="price text-center text-turquoise xl">
                        Text
                    </p>
                    <div class="priceTriangleDown"></div>
                </div>
            </div>
        </div>
        <!-- End toggle hide/show content -->
        <div class="row-fluid">
            <button data-toggle=".priceExaples"
                data-togglevisibletext="See more examples"
                data-togglehiddentext="See less examples"
                class="btnRounded btnRounded-inverted">
                See less examples</button>
        </div>
    </div>
</section>

$('[data-toggle]').click(function () {
    var $this = $(this);
    var toggle = $this.attr("data-toggle");
    // Scope triggered area
    var $context = $(toggle);

    var attr1 = $(this).attr('data-toggleHiddenText');
    var attr2 = $(this).attr('data-toggleVisibleText');
    if (typeof attr1 !== typeof undefined && attr1 !== false &&
        typeof attr2 !== typeof undefined && attr2 !== false) {
        // Toggle text on buttons
        var txt = $context.is(':visible') ? attr1 : attr2;
        $this.text(txt);
    }

    // Show/hide more content
    $context.slideToggle('fast');

});

http://jsfiddle.net/dbtxs5rt/1/

Answer 1

根据您的表格和评论，您可以使用以下 jQuery 实现您想要的:

var tbody = $('tbody'),
    rows = tbody.children('tr:gt(1)'),
    button = $('<button>Visa tabell</button>');

rows.hide().closest('table').after(button);

button.click(function () {    
    if (tbody.hasClass('shown')) {
        rows.fadeOut(function () {
            tbody.removeClass('shown');
            button.text('Visa tabell');
        });
    } else {
        rows.fadeIn(function () {
            tbody.addClass('shown');
            button.text('Dölj tabellen');
        });
    }          
});

Example