带折叠行表格的全部展开/收起按钮使用后单个折叠项失效求助

云上老周

2026-8-9

折叠表格批量操作后单个项失效问题

我做了一个带折叠行（手风琴式）的表格，顶部设置了「全部展开/收起」按钮。单个折叠项的展开与收起功能正常，批量按钮也能完成全展开或全收起操作，但使用该批量按钮后，无法再单独操作单个折叠项，只有刷新页面后才能恢复单个操作功能，直到再次使用批量按钮。已经尽可能排查调试并求助他人，问题仍未解决。

HTML 代码

<table class="fold-table">
    <tbody>
        <tr class="view">
            <td>Organisational Hierarchy Maintenance</td>
            <td>Test 1</td>
            <td>Test 2</td>
        </tr>
        <tr class="fold">
            <td colspan="7">
                <div class="fold-content">
                    <p>Define your strategic units and business units in a multi-level hierarchy</p>
                </div>
            </td>
        </tr>
        <tr class="view">
            <td>Organisational Hierarchy Maintenance</td>
            <td>Test 1</td>
            <td>Test 2</td>
        </tr>
        <tr class="fold">
            <td colspan="7">
                <div class="fold-content">
                    <p>Define your processes and business </p>
                </div>
            </td>
        </tr>
    </tbody>
</table>

jQuery 代码

$(function() {
    $(".fold-table tr.view").on("click", function() {
        $(this).toggleClass("open").next(".fold").toggleClass("open");
    });
});

function expandCollapse() {
    if ($(".fold").css('display') == 'none') {
        $("#expand-collapse").html("Collapse All");
        $(".fold").show("slow");
    } else {
        $("#expand-collapse").html("Expand All");
        $(".fold").hide("slow");
    }
}