Bootstrap 5导航栏下拉菜单与汉堡按钮失效问题求助

问题描述 #

• 基于Bootstrap 5开发Blogger主题，页面整体功能正常，但导航栏下拉菜单无法触发；移动端宽度下，汉堡菜单展开后无法收起
• Chrome浏览器控制台未检测到JavaScript错误，初步怀疑遗漏Bootstrap相关依赖库
• 最终通过替换为Bootstrap 5.2版本解决问题（当前站点源码已无原问题痕迹）

导航栏相关HTML代码 #

<a class='navbar-brand' href='/'>LOGO</a>
<button aria-controls='navbarSupportedContent' aria-expanded='false' aria-label='Toggle navigation' class='navbar-toggler' data-bs-target='#navbarSupportedContent' data-bs-toggle='collapse' type='button'>
<span class='navbar-toggler-icon'></span>
</button>
<div class='collapse navbar-collapse' id='navbarSupportedContent'>
<ul class='navbar-nav me-auto mb-2 mb-lg-0'>
  <li class='nav-item'><a aria-current='page' class='nav-link active' href='/'>Home</a></li>
  <li class='nav-item'><a class='nav-link' href='#'>Link</a></li>
  <li class='nav-item dropdown'><a aria-expanded='false' class='nav-link dropdown-toggle' data-bs-toggle='dropdown' href='#' role='button'>Dropdown</a>
    <ul class='dropdown-menu'>
      <li><a class='dropdown-item' href='#'>Action</a></li>
      <li><a class='dropdown-item' href='#'>Another action</a></li>
      <li><hr class='dropdown-divider'/></li>
      <li><a class='dropdown-item' href='#'>Something else here</a> 
     </li>
   </ul>
  </li>
  <li class='nav-item'><a class='nav-link disabled'>Disabled</a></li>
</ul>
<form action='/search' class='d-flex' method='GET' role='search'>
<input aria-label='Search' class='form-control me-2' name='q' placeholder='Search' type='search'/>
<button class='btn btn-secondary' type='submit'>Search</button>
</form>
</div>

问题原因分析 #

Bootstrap 5的交互组件（导航栏折叠、下拉菜单等）依赖其内置的JavaScript插件，常见失效原因包括：

• 版本兼容性问题：部分新版本（如5.3）可能存在未发现的兼容bug，本次案例中降级到5.2版本后问题解决
• 资源引入错误：未正确引入Bootstrap的JS文件，或引入顺序错误（Bootstrap 5需引入包含Popper的bootstrap.bundle.min.js）
• HTML属性错误：data-bs-toggle、data-bs-target等属性拼写错误，或目标元素ID不匹配（本次代码属性均正确）

解决步骤 #

1. 验证资源引入：确保同时引入Bootstrap CSS和包含Popper的JS文件，示例如下：

   <!-- Bootstrap 5.2 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <!-- Bootstrap 5.2 JS（内置Popper） -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
   

2. 版本降级测试：若使用最新版Bootstrap出现问题，尝试切换到稳定的旧版本（如5.2）
3. 检查HTML属性：确认data-bs-toggle、data-bs-target等属性拼写正确，目标元素ID与对应组件的ID完全匹配

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