ASP.NET MVC嵌套表格视图第三级子项点击后表格折叠问题求助

问题根因 #

1. 折叠容器ID全局重复：你所有折叠区域（一级客户展开区、二级销售对应的三级商品展开区）的ID全是AA_@(item.ID)，而item是一级客户对象，导致二级销售行的data-target指向的是一级客户的折叠容器。点击二级展开按钮时会触发一级容器的折叠，所以整个二级表格直接收起。
2. 按钮图标切换逻辑错误：JS里点击按钮时直接选中所有.bb/.subbutton元素统一切换类，会导致点击一个按钮，所有同类型按钮的图标全部变更，且切换逻辑直接移除了bb/subbutton类，后续再次点击无法触发事件。
3. ID命名无层级区分：不同层级的折叠容器没有独立的命名规则，极易出现重复冲突。

修复步骤 #

1. 修正Razor视图的ID和target绑定 #

给不同层级的折叠容器设置唯一ID，绑定对应触发元素的data-target：

@* 一级客户行修改：ID加前缀区分 *@
<tr class="accordion-toggle d-flex" data-toggle="collapse" data-target="#Cus_@(item.ID)">
    <td class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
        <button class="bb glyphicon glyphicon-chevron-down" type="button"></button>
    </td>
    <!-- 其他列代码不变 -->
</tr>
<tr>
    <td class="hiddenRow t" colspan=3>
        <div class="accordian-body collapse table-responsive" id="Cus_@(item.ID)">
            <table class="table table-hover subTable">
                <!-- 表头代码不变 -->
                <tbody>
                    @foreach (var sales in item.SalesList)
                    {
                        @* 二级销售行修改：data-target指向唯一的销售级折叠ID *@
                        <tr class="accordion-toggle d-flex" data-toggle="collapse" data-target="#Sales_@(item.ID)_@(sales.ID)">
                            <td class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
                                <button class="subbutton glyphicon glyphicon-chevron-down" type="button"></button>
                            </td>
                            <!-- 其他列代码不变 -->
                        </tr>
                        <tr>
                            <td class="hiddenRow t" colspan=5>
                                @* 三级商品展开区修改：用唯一的销售级ID *@
                                <div class="accordian-body collapse table-responsive" id="Sales_@(item.ID)_@(sales.ID)">
                                    <!-- 三级商品表格代码不变 -->
                                </div>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </td>
</tr>

注意：如果sales对象没有ID字段，可以用SalesID代替，保证每个销售项的标识唯一即可。

2. 修正JS逻辑 #

修改按钮点击事件，仅切换当前点击按钮的图标，且保留按钮的标识类：

$(document).ready(function () {
    // 折叠互斥逻辑不变
    $('.parentTable.table .accordian-body').on('show.bs.collapse', function () {
        $(this).closest("table")
            .find(".collapse.in")
            .not(this)
            .collapse('toggle')
    })
    $('.subTable.table .accordian-body').on('show.bs.collapse', function () {
        $(this).closest("table")
            .find(".collapse.in")
            .not(this)
            .collapse('toggle')
    })

    // 一级按钮图标切换：仅修改当前点击的按钮
    $('.bb').on('click', function (e) {
        $(this).toggleClass("glyphicon-chevron-down glyphicon-minus");
        e.preventDefault();
        e.stopPropagation(); // 阻止冒泡避免重复触发tr的折叠事件
    });
    // 二级按钮图标切换：仅修改当前点击的按钮
    $('.subbutton').on('click', function (e) {
        $(this).toggleClass("glyphicon-chevron-down glyphicon-minus");
        e.preventDefault();
        e.stopPropagation();
    });
});

内容的提问来源于stack exchange，提问作者Tarjia Alam Nisha