Django项目导航栏Bootstrap下拉按钮点击、悬停均无响应求助
问题根本原因
下拉功能完全失效是三类配置错误叠加导致的,和更换的Bootstrap资源链接可用性无关:
- 版本属性不匹配:当前引入的是Bootstrap 4.2版本的资源,但下拉组件的触发属性混用了5.0版本的写法。Bootstrap 4.x的组件触发属性不带
bs-前缀,代码中写的data-bs-toggle="dropdown"无法被4.2版本的JS识别,自然不会响应点击、悬停事件。 - JS执行中断:页面中的Tooltip初始化代码用了Bootstrap 5的全局API写法(通过
new bootstrap.Tooltip()完成初始化),但4.2版本不存在全局bootstrap对象,代码运行到这一步会直接抛出引用错误,阻断后续所有JS逻辑的执行,连带页面上其他本来符合规范的Bootstrap组件交互也会失效。 - DOM结构不规范:导航列表内部额外放置了一个
navbar-toggler按钮,对应的下拉菜单折叠容器和外层的导航折叠容器形成了不必要的嵌套,不符合Bootstrap导航组件的渲染结构要求,即便属性写法正确也会出现交互异常。
修正操作步骤
- 统一属性写法:删除所有组件标签上的
bs-前缀,比如把下拉触发按钮的data-bs-toggle="dropdown"替换为4.2版本兼容的data-toggle="dropdown";把多余的、位置错误的导航折叠按钮和对应的冗余折叠容器全部删除。 - 修正初始化逻辑:把现有的Tooltip初始化代码替换为4.2版本兼容的jQuery写法,示例:
$(function () { // 初始化Tooltip $('[data-toggle="tooltip"]').tooltip() // 初始化Popover $('[data-toggle="popover"]').popover() }) - 理顺导航层级:将下拉组件直接放在导航列表的
nav-item层级下,和其他导航项同级,不要嵌套额外的折叠容器。
修正完成后打开浏览器控制台,确认没有红色报错信息,下拉菜单的点击、悬停交互即可正常触发。
内容的提问来源于stack exchange,提问作者Oliver Štafurik
相关产品推荐
相关产品推荐

