Bootstrap 4导航栏内下拉菜单实现滑入展开动画方法咨询

嘿，这个需求我之前帮人解决过！Bootstrap 4原生的导航栏下拉菜单确实没有动画效果，要实现类似折叠导航栏的滑动展开，咱们可以通过自定义CSS+一点点JS来搞定，核心思路是把原生的display切换改成用max-height的过渡动画，具体步骤如下：

1. 先调整HTML结构 #

给导航栏里的下拉菜单容器加个自定义类，比如dropdown-slide，方便后续定位样式和控制动画：

<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Never expand</a>
  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExample01">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <!-- 给下拉菜单加自定义类 -->
        <div class="dropdown-menu dropdown-slide" aria-labelledby="dropdown01">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-md-0">
      <input class="form-control" type="text" placeholder="Search" aria-label="Search">
    </form>
  </div>
</nav>

2. 添加CSS过渡样式 #

原生下拉是用display: none/block切换的，这种方式没法做过渡动画，所以我们改用max-height配合overflow: hidden来实现滑动效果：

/* 初始隐藏状态：max-height设为0，隐藏超出内容 */
.dropdown-slide {
  max-height: 0;
  overflow: hidden;
  /* 调整过渡时长和动画曲线，和折叠导航栏保持一致 */
  transition: max-height 0.3s ease-out;
}

/* 展开状态：设置足够大的max-height，或者后续用JS动态计算 */
.dropdown-slide.show {
  max-height: 300px; /* 可以根据菜单内容调整数值 */
}

如果你的下拉菜单内容高度不固定，固定的max-height可能不够灵活，那咱们就用JS来动态适配。

3. 用JS动态计算菜单高度（更精准的方案） #

监听下拉菜单的show和hide事件，动态获取菜单的实际高度并赋值给max-height，这样不管菜单里有多少内容，动画都能完美适配：

// 下拉展开时，设置实际高度
$('.dropdown').on('show.bs.dropdown', function () {
  const $menu = $(this).find('.dropdown-slide');
  // 获取菜单的实际滚动高度（包含所有内容）
  const actualHeight = $menu[0].scrollHeight;
  $menu.css('max-height', actualHeight + 'px');
});

// 下拉收起时，重置max-height为0
$('.dropdown').on('hide.bs.dropdown', function () {
  $(this).find('.dropdown-slide').css('max-height', '0');
});

小提示：为什么不用原生collapse组件？ #

可能你会想直接用Bootstrap的collapse组件来做，但导航栏下拉的触发逻辑和collapse不太一样，直接套用会有冲突（比如点击下拉链接时，collapse的切换和dropdown原生行为会打架），所以还是用上面的自定义方式更稳妥。

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