Bootstrap多列下拉菜单无法切换li的active类问题

嘿，这个问题我之前也碰到过！把Bootstrap下拉菜单改成多列布局后，默认的active类切换失效，本质是你额外加的row、col-sm-3这些嵌套元素，破坏了Bootstrap原本依赖的DOM结构——它默认只会监听直接作为dropdown-menu子元素的<li>，现在你的菜单项被包在了多层div和子ul里，自然触发不了默认的状态切换逻辑。

下面给你两个实用的解决办法：

方法一：自定义JS事件监听（最快见效） #

手动给所有可点击的下拉菜单项绑定点击事件，主动控制active类的切换：

// 给多列下拉里的非禁用菜单项绑定点击事件
$('.multi-column-dropdown li:not(.disabled)').on('click', function() {
  // 移除当前列下所有菜单项的active类
  $(this).closest('.multi-column-dropdown').find('li').removeClass('active');
  // 给当前点击的项加上active类
  $(this).addClass('active');
  // 可选：点击后自动关闭下拉菜单
  $(this).closest('.dropdown').removeClass('open');
});

这个方法不用改现有HTML结构，直接加一段JS就能解决问题，适合不想动布局的场景。

方法二：调整DOM结构（更贴近Bootstrap规范） #

如果不想额外写JS，可以把多列布局用CSS实现，尽量保留Bootstrap默认的下拉结构：

<li class='dropdown'>
  <a href='#ExtRep' class='dropdown-toggle' data-toggle='dropdown'>Extended reports <b class='caret'></b></a>
  <ul class='dropdown-menu multi-column columns-3'>
    <!-- 用li包裹每一列，避免嵌套div破坏结构 -->
    <li class='dropdown-column'>
      <span class='column-title'>Server 1</span>
      <ul>
        <li><a href="#">Report 1</a></li>
        <li><a href="#">Report 2</a></li>
      </ul>
    </li>
    <li class='dropdown-column'>
      <span class='column-title'>Server 2</span>
      <ul>
        <li><a href="#">Report 3</a></li>
        <li><a href="#">Report 4</a></li>
      </ul>
    </li>
    <!-- 更多列 -->
  </ul>
</li>

然后用CSS把列改成横向排列：

.multi-column.columns-3 {
  width: 600px; /* 根据需求调整总宽度 */
  display: flex;
  gap: 20px;
  padding: 10px;
}
.dropdown-column {
  flex: 1;
  list-style: none;
}
.column-title {
  display: block;
  padding: 3px 0;
  font-weight: bold;
  color: #666;
  margin-bottom: 8px;
}

这种结构更符合Bootstrap的设计预期，默认的active切换逻辑大概率能正常工作，就算不行，再结合上面的JS也能快速修复。

小提醒 #

如果你的菜单项是纯文本（没有<a>标签），要确保li能触发点击事件；另外Bootstrap 4+版本的下拉事件逻辑略有变化，上面的JS是通用适配的，不用担心版本问题。

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