为什么点击Bootstrap导航栏汉堡菜单时对应内容不显示？

问题原因 #

你引入的是Bootstrap 4.3.1版本，但汉堡按钮上使用了Bootstrap 5专属的data-bs-前缀属性，Bootstrap 4的JS脚本无法识别该属性，因此无法触发折叠动作。

修复方案 #

仅需修改按钮上的两个属性即可：

• 把data-bs-toggle="collapse"改为data-toggle="collapse"
• 把data-bs-target="#toggleMobileMenu"改为data-target="#toggleMobileMenu"

修正后的按钮代码如下：

<button
 class="navbar-toggler"
 type="button"
 data-toggle="collapse"
 data-target="#toggleMobileMenu"
 aria-controls="toggleMobileMenu"
 aria-expanded="false"
 aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>

修改后刷新页面即可正常触发汉堡菜单的展开/折叠效果，无需改动其他现有配置。

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