Bootstrap 4导航栏无法折叠/展开问题求助

兄弟，我刚学Bootstrap那会儿也踩过一模一样的坑！导航栏缩小时菜单图标显示正常，但点了完全没反应，哪怕抄官方代码也不管用，大概率是依赖库的问题——Bootstrap 4的折叠组件（包括导航栏的折叠功能）必须依赖jQuery和Popper.js，而且加载顺序绝对不能乱。

下面给你列几个必查的关键点：

• 严格按顺序引入依赖库：必须是「jQuery → Popper.js → Bootstrap JS」的顺序，因为Bootstrap的JS是基于jQuery开发的，顺序反了就会导致组件失效。本地引入的话，代码大概是这样：

  <!-- 先引入jQuery库（推荐用3.x版本的slim精简版） -->
  <script src="jquery.min.js"></script>
  <!-- 再引入Popper.js库，导航折叠、弹窗这些组件都需要它 -->
  <script src="popper.min.js"></script>
  <!-- 最后引入Bootstrap 4的JS文件 -->
  <script src="bootstrap.min.js"></script>
  

• 检查折叠按钮与菜单的关联ID是否匹配：折叠按钮的data-target属性值，必须和导航菜单容器的id完全一致，差一个字符都不行。比如官方示例里的对应关系：

  <!-- 折叠按钮的data-target要指向菜单容器的id -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu">
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <!-- 导航菜单容器的id要和上面的data-target完全匹配 -->
  <div class="collapse navbar-collapse" id="navbarMenu">
    <!-- 你的导航菜单项 -->
  </div>
  

• 排查是否重复引入JS库：如果不小心重复引入了jQuery或者Bootstrap JS，很容易造成代码冲突，导致折叠功能失效，把多余的引入代码删掉就好。

• 查看浏览器控制台的报错信息：按F12打开开发者工具，切换到「Console」标签页，看看有没有红色的错误提示——比如提示$ is not defined，说明jQuery没加载成功；如果提示Popper is not defined，就是漏了Popper.js，针对性补上就行。

我当初就是漏了Popper.js，折腾了快一小时才找到问题，按上面的步骤排查一遍，应该就能解决你的问题啦！

内容的提问来源于stack exchange，提问作者William Heath Blandford