Bootstrap手风琴在.NET Core MVC视图中无法展开问题求助

问题根因 #

核心问题是Bootstrap版本与组件使用的属性不兼容：

• 你视图中使用的手风琴代码，用到的data-bs-toggle、data-bs-target、data-bs-parent这类带bs后缀的属性，是Bootstrap 5专属的交互触发属性
• 从布局文件里导航栏使用的data-toggle、data-target（无bs后缀），以及默认.NET Core MVC模板的默认依赖来看，你项目本地~/lib/bootstrap/目录下安装的是Bootstrap 4版本，低版本Bootstrap无法识别高版本的专属属性，所以点击手风琴没有任何反应。

你提到的W3School自定义手风琴可以正常运行，是因为这段代码自带了独立的样式和交互逻辑，不依赖Bootstrap的内置能力，所以不受Bootstrap版本影响。

解决方法 #

有两种可选方案，任选其一即可：

方案1：升级项目的Bootstrap到5.x版本 #

使用VS自带的LibMan（客户端库管理工具），将本地~/lib/bootstrap下的包更新到5.x版本，更新完成后你现有的手风琴代码不需要任何修改就可以正常运行。

方案2：修改手风琴属性适配Bootstrap 4版本 #

将手风琴代码里所有Bootstrap 5专属的属性替换为Bootstrap 4兼容的写法：

• 所有手风琴按钮上的data-bs-toggle="collapse"修改为data-toggle="collapse"
• 所有手风琴按钮上的data-bs-target="xxx"修改为data-target="xxx"
• 所有折叠内容div上的data-bs-parent="#accordionFlushExample"修改为data-parent="#accordionFlushExample"

另外accordion-flush是Bootstrap 5新增的类，Bootstrap 4没有对应样式，如果你需要类似的无边框手风琴效果，可以自行补充简单的CSS样式实现。

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