Bootstrap 5下拉菜单仅首页可触发，子页面点击无反应该如何修复

解决方案 #

你可以按以下步骤逐一排查解决问题：

• 修改下拉触发项的跳转属性
  不要使用#作为href属性值，相对路径下#会自动拼接当前页面路径，可能干扰Bootstrap下拉事件的默认行为，可替换为两种写法：
  1. 修改href属性为无效JS地址：

  <a href="javascript:void(0)" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Recursos</a>
  

  2. 更规范的方案是直接替换为button元素（不需要跳转的交互按钮优先用button标签）：

  <button class="nav-link dropdown-toggle" data-bs-toggle="dropdown" style="background: transparent; border: none; padding: 0;">Recursos</button>
  

• 替换稳定的资源引入路径
  当前使用的Bootstrap资源是文档站的内部路径，可能存在访问限制，建议替换为官方公开的稳定CDN资源路径，确保所有页面都能正常加载资源。
• 手动初始化下拉组件
  部分场景下Bootstrap的自动初始化会在子页面失效，可在公共模板的</body>标签前添加以下代码，手动初始化所有下拉组件：

  document.addEventListener('DOMContentLoaded', function () {
    // 查找所有下拉触发元素
    const dropdownToggles = document.querySelectorAll('.dropdown-toggle')
    dropdownToggles.forEach(el => new bootstrap.Dropdown(el))
  })
  

• 检查资源加载与报错
  打开浏览器开发者工具：
  1. 切换到Network面板，确认子页面的bootstrap.bundle.min.js加载成功，没有404、跨域等错误
  2. 切换到Console面板，查看是否有其他JS报错阻断了Bootstrap事件执行

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