Bootstrap 4树形表格子项无法全部折叠问题排查

先给你梳理下当前代码里的核心问题，再一步步给出修正方案：

1. 先修正ID唯一性问题 #

HTML规则里同一个页面不能有重复ID，你现在有多个<tr id="Artistic">和<tr id="Combat">，这会直接导致Bootstrap的collapse组件无法正确识别目标元素，这是首要需要解决的问题。我们要给每个折叠容器设置唯一ID，同时用类来分组关联父项。

2. 调整折叠触发与目标的关联逻辑 #

原代码里CombatHeader的aria-controls带了#前缀，还关联了子子项，这是错误的：aria-controls只需要写目标元素的ID（不带#），而且父级触发元素只需要关联直接子折叠项，子层级的折叠由子触发元素自己控制即可。

3. 添加递归折叠子层级的自定义逻辑 #

Bootstrap的collapse组件默认不会自动递归折叠所有子层级，所以我们需要监听父折叠项的hide.bs.collapse事件，当父项收起时，手动收起所有子层级的折叠内容。

修正后的完整代码 #

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Bootstrap Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function() {
            // 监听父折叠项的隐藏事件，递归收起所有子层级
            $('.collapse-parent').on('hide.bs.collapse', function() {
                // 找到当前折叠项里所有的折叠内容，全部收起
                $(this).find('.collapse').collapse('hide');
            });

            // 确保子项默认是收起状态，点击父项时不会自动展开子项
            $('.child-collapse').collapse({
                toggle: false
            });
        });
    </script>
</head>
<body>
    <div class="container">
        <table class="table" id="Skills">
            <!-- Artistic 组 -->
            <tr id="ArtisticHeader" data-toggle="collapse" data-target="#ArtisticGroup" aria-expanded="true" aria-controls="ArtisticGroup">
                <td><i class="fa fa-caret-down"></i> Artistic</td>
            </tr>
            <tr id="ArtisticGroup" class="collapse show collapse-parent">
                <td>&nbsp;&nbsp;Painting</td>
            </tr>
            <tr class="collapse show" aria-labelledby="ArtisticHeader">
                <td>&nbsp;&nbsp;Drawing</td>
            </tr>

            <!-- Combat 组 -->
            <tr id="CombatHeader" data-toggle="collapse" data-target="#CombatGroup" aria-expanded="true" aria-controls="CombatGroup">
                <td><i class="fa fa-caret-down"></i> Combat</td>
            </tr>
            <tr id="CombatGroup" class="collapse show collapse-parent">
                <td>
                    <span data-toggle="collapse" data-target="#CombatWeaponsGroup" aria-expanded="false" aria-controls="CombatWeaponsGroup">
                        <i class="fa fa-caret-right"></i> Weapons
                    </span>
                </td>
            </tr>
            <tr id="CombatWeaponsGroup" class="collapse child-collapse">
                <td>&nbsp;&nbsp;&nbsp;&nbsp;one handed</td>
            </tr>
            <tr class="collapse child-collapse" aria-labelledby="CombatGroup">
                <td>&nbsp;&nbsp;&nbsp;&nbsp;two handed</td>
            </tr>

            <tr class="collapse show collapse-parent" aria-labelledby="CombatHeader">
                <td>
                    <span data-toggle="collapse" data-target="#CombatMissilesGroup" aria-expanded="false" aria-controls="CombatMissilesGroup">
                        <i class="fa fa-caret-right"></i> Missiles
                    </span>
                </td>
            </tr>
            <tr id="CombatMissilesGroup" class="collapse child-collapse">
                <td>&nbsp;&nbsp;&nbsp;&nbsp;Bows</td>
            </tr>
            <tr class="collapse child-collapse" aria-labelledby="CombatGroup">
                <td>&nbsp;&nbsp;&nbsp;&nbsp;Sling</td>
            </tr>
        </table>
    </div>
</body>
</html>

关键改进点说明 #

• 唯一ID：每个折叠容器（比如#ArtisticGroup、#CombatWeaponsGroup）都设置了唯一ID，避免DOM元素冲突。
• 递归折叠逻辑：通过监听hide.bs.collapse事件，当父折叠项收起时，自动遍历所有子折叠项并调用collapse('hide')，实现全层级收起。
• 子项默认收起：给子折叠项添加child-collapse类，通过collapse({toggle: false})设置默认不展开，只有点击子项的触发元素才会展开。
• 视觉优化：添加了Font Awesome的 caret 图标，让折叠状态更直观（展开时向下箭头，收起时向右箭头）。

这样调整后，点击Combat时，它下面的Weapons、Missiles以及它们的子项都会全部收起，而且点击Combat时不会自动展开Weapons这类带子项的子项，完全符合你的需求。

内容的提问来源于stack exchange，提问作者DaveK