ASP.NET Core分部视图中Bootstrap 5 Accordion展开后无法折叠问题

问题根因 #

• 核心原因是JavaScript库重复加载导致的事件绑定冲突。你的_PartialView.cshtml中额外引入了jQuery和bootstrap.bundle.js，而ASP.NET Core MVC默认的主布局页（_Layout.cshtml）或Index.cshtml本身已经加载过这两个依赖库。第二次加载jQuery会覆盖原有实例，清空之前已绑定的Bootstrap事件监听；第二次加载Bootstrap JS会导致手风琴组件的交互逻辑重复绑定，最终出现只能展开、无法折叠的异常。
• 你直接将手风琴代码放在Index.cshtml中可正常运行，是因为此场景下不会重复加载依赖库，事件绑定逻辑仅执行一次，组件交互无冲突。
• 分部视图中引入的Bootstrap CSS属于冗余资源，主页面已加载的情况下无需重复引入。

修复方案 #

1. 删除_PartialView.cshtml中多余的静态资源引用代码，修改后的代码如下：

@{
    Layout = null;
}

<div class="accordion" id="2">
    <div class="accordion-item">
        <h2 class="accordion-header" id="h-1">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#c-1" aria-expanded="false" aria-controls="c-1">
                First Button
            </button>
        </h2>
        <div id="c-1" class="accordion-collapse collapse" aria-labelledby="h-1">
            <div class="accordion-body">
                TO DO
            </div>
        </div>
    </div>

    <div class="accordion-item">
        <h2 class="accordion-header" id="h-2">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#c-2" aria-expanded="false" aria-controls="c-2">
                Second Button
            </button>
        </h2>
        <div id="c-2" class="accordion-collapse collapse" aria-labelledby="h-2">
            <div class="accordion-body">
                TO BE
            </div>
        </div>
    </div>
</div>

2. 确认全局公共资源已在主布局页或Index.cshtml中正确引入，引入顺序需保证jQuery早于Bootstrap JS加载：

<!-- 放在页面head部分 -->
<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css" />
<!-- 放在页面底部，Scripts节之前 -->
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.bundle.js"></script>

补充说明：如果你的业务场景需要多次点击Load按钮加载多个手风琴组件，需要为每个手风琴的id、内部的h-*、c-*属性生成唯一值，避免ID重复导致的交互异常。

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