單擊時使用jquery展開/折疊表的2/3

Question

我在單擊頁腳時嘗試展開和折疊2/3的表行。

 <table class="planTable"> 
    <tbody> 

        <tr> 
            <th>Plan</th> 
        </tr> 

        <tr class="cartItemGroup"> 
            <td > 
            10 
            GB 
            </td> 
        </tr> 

        <tr class="cartItemGroup">
            <td > 
            300 
            MB 
            </td> 
        </tr> 

        <tr class="cartItemGroup"> 
            <td > 
            1 
            GB 
            </td> 
        </tr> 

        <tr class="cartItemGroup"> 

            <td > 
            3 
            GB 
            </td> 
        </tr> 

        <tr class="cartItemGroup"> 
            <td > 
            6 
            GB 
            </td> 
        </tr> 

        <tr class="cartItemGroup">
            <td > 
            15 
            GB 
            </td> 
        </tr> 

        <tr class="cartItemGroup"> 
            <td > 
            20 
            GB 
            </td> 
        </tr> 

        <tr class="cartItemGroup">
            <td > 
            30 
            GB 
            </td>
        </tr> 

        <tr class="cartItemGroup"> 
            <td > 
            40 
            GB 
            </td> 
        </tr> 

        <tr class="cartItemGroup"> 
            <td > 
            50 
            GB 
            </td> 
        </tr> 

    </tbody> 
    <tfoot>
        <tr> 
            <td>  
                <a class="toggle planSection dBlock more-less collapseImg" href="javascript:void(0)"> 
                    <div> 
                        <font class="mrcLabel">Show top 3</font> 
                    </div> 
                </a> 
            </td>
        </tr>
    </tfoot>
</table>

頁腳包含使用錨標記觸發事件的文本

默認情況下應將其折疊為“顯示所有計划”作為文本，展開時文本應自動更改為“顯示前3”，文本應保留在底部

的jsfiddle

Answer 1

完全披露這個解決方案使用jQuery，但是因為你用jQuery標記我認為它會沒問題。

我略微更改了標記，使其與您的默認大小寫保持一致，以避免在JavaScript加載時內容閃爍。

$(function () {
    var expandText = 'Show all plans',
        closeText  = 'Show top 3',
        isOpen = false,
        rowsToShowWhenCollapsed = 3,
        $rows = $('.cartItemGroup'),
        $triggerLink = $('.toggle');

    $triggerLink.on('click', function (e) {
        e.preventDefault();

        if (isOpen) {
            closeRows();
            isOpen = false;
        } else {
            openRows();  
            isOpen = true;
        }
    }); 

    function closeRows () {
       var rowArray = $rows.toArray();

        $rows.hide();

        for (var i = 0; i < rowsToShowWhenCollapsed; i++) {
            $(rowArray[i]).show();
        }

        $triggerLink.find('span').text(expandText);
    }

    function openRows () {
        $rows.show();
        $triggerLink.find('span').text(closeText);
    }

    closeRows();
});

簽出這個JSFiddle來查看它的運行代碼。