VS2022中ASP.NET Core 8 MVC的Bootstrap折叠菜单点击无响应求助

兄弟，我一眼就瞅出问题所在啦！你用的是Bootstrap 5.3.3，但菜单按钮的属性还是Bootstrap 4的老写法，这直接导致汉堡图标点击没反应～

核心问题：Bootstrap 5 变更了组件的data属性前缀 #

Bootstrap 5 为了避免和其他框架的属性冲突，把所有组件的data属性前缀从data-*统一改成了data-bs-*。你现在代码里的data-toggle和data-target是Bootstrap 4及更早版本的语法，Bootstrap 5根本识别不了这些属性，自然触发不了折叠效果。

修复步骤 #

只需要修改导航栏按钮的属性即可，把原来的按钮代码替换成下面的内容：

<button class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarNav"
        aria-controls="navbarNav"
        aria-expanded="false"
        aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

说白了就是把 data-toggle 改成 data-bs-toggle，data-target 改成 data-bs-target。

额外小提示 #

Bootstrap 5 已经不再强制依赖jQuery了，如果你项目里没用到jQuery的其他功能（比如你引入的jQuery UI），其实可以把jQuery的引用去掉，减少不必要的资源加载。当然你现在保留也没关系，不会影响菜单功能。

修改完之后重启一下你的ASP.NET Core项目，刷新页面，缩小浏览器到移动端尺寸，再点击汉堡图标试试，菜单应该就能正常展开折叠啦！

备注：内容来源于stack exchange，提问作者Dec