Bootstrap 4：自定义动画汉堡图标页面加载时默认显示关闭状态（X）？

刚接触Bootstrap 4遇到这种问题太正常啦，我当初也踩过类似的坑😉。默认情况下，导航栏的切换按钮应该显示汉堡菜单图标，只有点击展开菜单后才会变成关闭的X。现在默认显示X，大概率是你的菜单内容在页面加载时就是展开状态的，或者是自定义样式/JS出了问题，给你列几个最常见的排查点：

1. 检查折叠容器的show类 #

Bootstrap 4里，collapse类默认是隐藏折叠内容的，而show类会强制让内容默认展开。如果你的#navbarResponsive容器上不小心加了show类，页面加载时菜单就是展开的，切换按钮自然会显示关闭图标。

解决方法：把#navbarResponsive上的show类删掉，只保留collapse navbar-collapse这两个核心类就行。

2. 排查自定义CSS是否覆盖了默认图标 #

新手很容易在自定义样式时不小心替换了切换按钮的默认图标。Bootstrap的navbar-toggler-icon是通过背景图实现的：默认汉堡图标是三条横线的SVG，关闭图标是叉号SVG，只有菜单展开时JS才会切换这个背景图。

如果你的自定义CSS里写了类似下面的代码，就会强制把默认图标改成关闭样式：

/* 错误示例：强制替换为关闭图标 */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

解决方法：删掉这类强制替换图标的CSS，或者确保只有在菜单展开状态下才应用关闭图标的样式。

3. 验证JavaScript依赖和加载顺序 #

Bootstrap 4的折叠组件依赖jQuery和Popper.js，如果这两个库没正确引入，或者加载顺序错了，会导致组件初始化异常，菜单可能默认展开。

正确的加载顺序：

1. jQuery
2. Popper.js
3. Bootstrap JS

给你一个正确的基础结构参考 #

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">你的品牌</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="切换导航">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">首页</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">关于我们</a>
      </li>
    </ul>
  </div>
</nav>

注意这里aria-expanded="false"是默认状态，告诉辅助技术当前菜单是折叠的，Bootstrap JS会自动管理这个属性和图标的切换。

先从第一点开始排查，大概率就能解决问题啦！

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