Bootstrap5.1导航栏toggler点击后不显示对应内容问题求助

问题原因&修复步骤 #

• 缺失Bootstrap 5 JavaScript依赖
  Bootstrap 5的折叠交互、下拉菜单等动态组件都依赖官方提供的JS文件运行，你当前代码仅引入了CSS样式文件，没有引入JS依赖，是点击无响应的核心原因。
  修复方式：在页面</body>闭合标签前添加如下JS引入代码：

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  

  这里引入的bundle版本已经内置了Popper.js，不需要额外单独引入依赖。

• 属性名被换行打断失效
  你代码中导航栏按钮的data-bs-target属性被强制拆分到两行，浏览器会将其识别为无效的属性，无法关联到对应折叠内容容器：

  <!-- 错误写法 -->
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs- 
  target="#navbarTogglerDemo02">
  

  修复方式：将属性名和属性值写在同一行，不要随意拆分HTML属性名称：

  <!-- 正确写法 -->
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
  

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