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

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

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

图1

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

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

图2

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

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

图3

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

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

图4

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

查看源代码,data-toggle="dropdown"。

图5

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

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

图6

 

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/250693.html

(1)
上一篇 2022年5月1日
下一篇 2022年5月1日

相关推荐

发表回复

登录后才能评论