Laravel三级可折叠表格实现问题求助及解决方案

在Laravel项目中实现master_zone（主区域）、subarea（子区域）、microarea（微区域）三级可折叠表格时，常遇到只有最外层master_zone能正常展开收起，内层subarea和microarea失效的问题——核心原因大多是折叠触发元素与目标元素的ID绑定不唯一，或者JS逻辑没有覆盖到内层层级。

下面是初始问题代码，以及修复后的完整可用代码：

初始问题代码（仅master_zone可折叠） #

Blade视图HTML部分 #

<table class="table table-bordered">
    <thead>
        <tr>
            <th>主区域</th>
            <th>子区域</th>
            <th>微区域</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        @foreach($groupedData as $masterZone => $subareas)
            <tr class="master-row">
                <td>
                    <button class="btn btn-sm btn-toggle" data-target="subarea-collapse">
                        +
                    </button>
                    {{ $masterZone }}
                </td>
                <td colspan="3"></td>
            </tr>
            <tr id="subarea-collapse" class="collapse-row">
                <td></td>
                <td colspan="3">
                    @foreach($subareas as $subarea => $microareas)
                        <div class="subarea-item">
                            <button class="btn btn-sm btn-toggle" data-target="microarea-collapse">
                                +
                            </button>
                            {{ $subarea }}
                        </div>
                        <div id="microarea-collapse" class="collapse-content">
                            @foreach($microareas as $microarea)
                                <div class="microarea-item">
                                    {{ $microarea->name }}
                                </div>
                            @endforeach
                        </div>
                    @endforeach
                </td>
            </tr>
        @endforeach
    </tbody>
</table>

初始JS代码 #

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.btn-toggle').forEach(button => {
        button.addEventListener('click', function() {
            const targetId = this.getAttribute('data-target');
            const target = document.getElementById(targetId);
            target.classList.toggle('d-none');
            this.textContent = this.textContent === '+' ? '-' : '+';
        });
    });
});

问题出在：所有subarea的折叠目标都是同一个subarea-collapse ID，所有microarea的折叠目标都是同一个microarea-collapse ID——DOM中ID必须唯一，导致点击内层按钮时只会操作第一个匹配的元素，无法对应到当前层级的内容。

解决后完整可用代码 #

Blade视图HTML部分（关键：给每个层级的折叠元素生成唯一ID） #

<table class="table table-bordered">
    <thead>
        <tr>
            <th>主区域</th>
            <th>子区域</th>
            <th>微区域</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        @foreach($groupedData as $masterZone => $subareas)
            {{-- 主区域行 --}}
            <tr class="master-row">
                <td>
                    <button class="btn btn-sm btn-toggle" data-target="subarea-collapse-{{ Str::slug($masterZone) }}">
                        +
                    </button>
                    {{ $masterZone }}
                </td>
                <td colspan="3"></td>
            </tr>
            {{-- 子区域折叠容器 --}}
            <tr id="subarea-collapse-{{ Str::slug($masterZone) }}" class="collapse-row d-none">
                <td></td>
                <td colspan="3">
                    @foreach($subareas as $subarea => $microareas)
                        <div class="subarea-item mb-2">
                            <button class="btn btn-sm btn-toggle" data-target="microarea-collapse-{{ Str::slug($masterZone) }}-{{ Str::slug($subarea) }}">
                                +
                            </button>
                            {{ $subarea }}
                        </div>
                        {{-- 微区域折叠容器 --}}
                        <div id="microarea-collapse-{{ Str::slug($masterZone) }}-{{ Str::slug($subarea) }}" class="collapse-content d-none ms-4">
                            @foreach($microareas as $microarea)
                                <div class="microarea-item mb-1">
                                    <span>{{ $microarea->name }}</span>
                                </div>
                            @endforeach
                        </div>
                    @endforeach
                </td>
            </tr>
        @endforeach
    </tbody>
</table>

修复后的JS代码（逻辑不变，但依赖唯一ID实现精准匹配） #

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.btn-toggle').forEach(button => {
        button.addEventListener('click', function() {
            const targetId = this.getAttribute('data-target');
            const target = document.getElementById(targetId);
            if (target) {
                target.classList.toggle('d-none');
                this.textContent = this.textContent === '+' ? '-' : '+';
            }
        });
    });
});

关键修改说明 #

1. 唯一ID生成：使用Str::slug()将每个master_zone和subarea的名称转为唯一标识，拼接成专属的折叠容器ID（如subarea-collapse-xxx、microarea-collapse-xxx-yyy），确保每个层级的触发按钮与目标容器一一对应。
2. 初始隐藏：给折叠容器添加d-none类（Bootstrap内置类），实现初始收起状态。
3. 容错处理：JS中增加if (target)判断，避免找不到元素时报错。

这样修改后，master_zone、subarea、microarea三级都能独立展开收起，互不干扰。

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