Bootstrap v4导航栏折叠动画异常：.in与.show类共存问题求解

嘿，我之前做Bootstrap 4项目时也碰到过一模一样的问题！响应式视图下导航栏折叠切换时，因为.in（Bootstrap 3的遗留类）和.show（Bootstrap 4的标准类）同时出现在折叠元素上，导致动画逻辑冲突，表现为展开/收起时卡顿、动画异常。下面给你两个靠谱的解决办法：

方法一：重写CSS强制统一样式 #

直接通过CSS覆盖.in类的行为，让它和.show保持一致，消除冲突：

/* 针对导航栏折叠内容，对齐.in和.show的表现 */
.navbar .collapse.in {
  display: block !important;
  height: auto !important;
  /* 沿用Bootstrap 4默认的折叠过渡动画 */
  transition: height .35s ease !important;
}

原理：.in是Bootstrap 3中控制折叠展开的类，Bootstrap 4已经改用.show。如果你的项目里因为第三方插件、自定义脚本或误引入v3代码导致.in被添加，用这个CSS可以让.in的样式完全对齐.show，避免动画逻辑打架。

方法二：用JavaScript移除多余的.in类 #

通过监听Bootstrap折叠组件的事件，在切换时主动清理掉.in类：

// 监听导航栏折叠的展开/收起事件
$('.navbar .collapse').on('show.bs.collapse hide.bs.collapse', function() {
  // 立即移除.in类，确保只有Bootstrap 4的.show类生效
  $(this).removeClass('in');
});

// 额外：页面加载完成后先检查并清理一次
$(document).ready(function() {
  $('.navbar .collapse').each(function() {
    if ($(this).hasClass('show') && $(this).hasClass('in')) {
      $(this).removeClass('in');
    }
  });
});

原理：Bootstrap的折叠组件会触发show.bs.collapse和hide.bs.collapse事件，我们在这些事件触发时移除.in类，确保折叠元素始终只使用Bootstrap 4的类体系，从根源上解决动画异常。

额外排查建议 #

最好再检查下项目里有没有同时引入Bootstrap 3和Bootstrap 4的资源，或者有没有自定义JS代码手动给折叠元素添加了.in类——找到这个触发源，能彻底避免以后再出现类似问题。

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