解决下拉框无反应问题(Laravel 8.x 版本,Bootstrap 5.x 版本)

1、点击用户名:111111 时,理应弹出的下拉菜单却没有任何响应。如图1

图1

2、确认已经引入 Bootstrap 的 JavaScript 组件库。Laravel 默认已经在 resources/js/bootstrap.js 文件中为我们配置好了 jQuery 和 Bootstrap。查看源代码,app.css 与 app.js 文件皆已经引入。如图2

图2

3、查看 app.css 的源码,确认 Bootstrap 版本号:Bootstrap v5.1.3。如图3

图3

4、查看网址:https://v5.bootcss.com/docs/examples/headers/ ,bootstrap 在 5.x 版本中,对于下拉菜单的 class 命名有些改变。data-bs-toggle=”dropdown”。如图4

图4

5、查看源代码,data-toggle=”dropdown”。如图5

图5

6、将 data-toggle=”dropdown” 调整为:data-bs-toggle=”dropdown” ,点击用户名:111111 时,下拉列表已可弹出。如图6

图6

 

永夜