Razor foreach循环中Bootstrap折叠面板无法实现单展开互斥的问题

• Bootstrap 折叠组件的手风琴联动机制，核心要求是所有需要联动的折叠面板，必须挂载在同一个公共父容器下。组件触发展开操作时，会顺着触发元素上的data-parent属性定位到这个公共容器，自动收起容器内其他已展开的折叠面板。
• 你当前的Razor代码在foreach循环内部，每次遍历都新建一个独立的.panel-group容器，每个容器里仅放置1个面板，所有面板完全处于无关联的独立DOM层级，组件找不到联动的作用范围，自然无法实现自动收起的逻辑。
• 你给触发链接配置的属性中，缺失了指向公共父容器的data-parent字段，进一步切断了组件的联动关联。

调整Razor的DOM生成结构，把公共的手风琴容器挪到循环外层，所有面板统一挂载到这个容器下，补充对应的联动属性即可：

@{ int i = 0; }
<!-- 仅生成1个公共手风琴父容器，不要放在循环内部重复创建 -->
<div class="panel-group" id="main-accordion">
    @foreach (var levelOne in Model.MenuLevelOne)
    {
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a 
                        onclick="leveltwo('@levelOne.MenuLevel')" 
                        data-toggle="collapse" 
                        data-parent="#main-accordion"
                        data-target="#collapse_@i" 
                        href="#collapse_@i"
                    >
                        @levelOne.MenuLevel
                    </a>
                </h4>
            </div>
            <!-- 移除原代码中的in类，实现页面加载时所有面板默认折叠的效果 -->
            <div id="collapse_@i" class="panel-collapse collapse">
                <div class="panel-body">
                    <ul class="" id="id-@levelOne.MenuLevel"></ul>
                    <ul class="filter-categories__list"></ul>
                </div>
            </div>
        </div>
        i++;
    }
</div>

调整完成后，不需要额外编写自定义JS联动逻辑，Bootstrap折叠组件会自动实现目标交互：

• 页面初始加载时所有面板保持折叠状态，仅展示顶层菜单列表
• 点击某一个顶层菜单触发对应面板展开时，组件会自动定位到#main-accordion公共容器，收起容器内其他所有已展开的面板，实现同时仅一个面板保持展开的效果

你之前自行添加实现脚本时出现的报错，本质是原多独立容器的结构下，自定义脚本的DOM选择器、事件绑定逻辑和实际DOM结构不匹配导致的，调整为上述统一容器结构后，只要正常引入对应版本的Bootstrap CSS和JS文件，这类报错会自然消失。

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