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>

页脚包含使用锚标记触发事件的文本

默认情况下应将其折叠为“show all plans”作为文本＆安培; 展开时，文字应自动更改为“显示前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以查看代码的实际效果。

单击时使用jquery展开/折叠表的2/3

1 个答案: