Laravel 8导航栏dropdown下拉菜单点击无法展开如何解决

故障原因 #

• 属性版本不匹配：当前导航栏代码使用Bootstrap 5的data-bs-*前缀交互属性，但Laravel 8默认通过Laravel UI生成的前端依赖为Bootstrap 4版本，Bootstrap 4无法识别带bs前缀的自定义属性，无法绑定下拉、折叠的交互事件。
• 前端资源未编译：多数场景下安装完Laravel前端依赖后未执行编译命令，public目录下的app.js为初始空文件，未包含Bootstrap的交互逻辑，仅CSS样式可正常加载渲染。

修复方案 #

可根据使用的Bootstrap版本二选一操作：

方案1：适配默认Bootstrap 4版本（无需升级依赖） #

修改resources/views/components/navbar.blade.php中两处交互属性，移除属性名中的bs前缀：

1. 移动端折叠按钮：将data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"替换为data-toggle="collapse" data-target="#navbarSupportedContent"
2. 下拉触发元素：将data-bs-toggle="dropdown"替换为data-toggle="dropdown"

修改完成后在项目根目录执行以下命令编译前端资源：

npm install
npm run dev

生产环境部署时执行npm run prod即可。

方案2：使用Bootstrap 5版本（保留现有属性写法） #

如果需要使用Bootstrap 5的特性，升级前端依赖即可：

1. 卸载旧版本依赖并安装Bootstrap 5及配套依赖：

npm uninstall bootstrap
npm install bootstrap@5 @popperjs/core --save-dev

2. 修改resources/js/bootstrap.js文件，替换Bootstrap引入逻辑：

// 删除原有Bootstrap 4的引入代码，添加以下内容
import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;

3. 执行命令重新编译前端资源：

npm run dev

校验方式 #

清除浏览器缓存后刷新页面，测试下拉菜单、移动端导航折叠功能是否正常触发。如果仍有异常，打开浏览器开发者工具控制台查看JS报错，若提示popper相关依赖缺失，重新执行npm install后再次编译即可。

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