html 具有折叠式行的表的“全部展开/折叠”按钮

ql3eal8s  于 2022-12-09  发布在  其他
关注(0)|答案(1)|浏览(382)

我已经创建了一个带有折叠行的表格。我还在顶部有一个按钮,用于展开所有折叠行并再次折叠它们。
accordion 可以完美地单独打开和关闭,当使用展开/折叠所有按钮时,它们都可以完美地展开和折叠。问题出现了,一旦我使用展开/折叠所有按钮,我就无法打开单独的 accordion 。
只有当页面刷新后,我才能单独打开它们,直到我使用"全部展开/折叠"按钮。
任何帮助都将不胜感激。
我尽可能多地进行故障排除和调试,并向多个人寻求帮助,但一直没有成功。
于飞:

<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>

查询:

$(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");
    }
}
    • 前端预览**

camsedfj

camsedfj1#

您可以看到箭头工作http://jsfiddle.net/dreambold/q0tfp4yd/7/的实时演示
这是工作代码。
第一个

相关问题