如何用JS切换Bootstrap折叠菜单的Font Awesome加减图标？

看起来你的核心问题是菜单展开/收起时图标始终停留在加号，无法切换成减号。结合Bootstrap 3的折叠组件机制和Font Awesome 5的图标规则，我来帮你排查并解决这个问题：

第一步：确认HTML结构的正确性 #

首先确保你的折叠菜单结构符合Bootstrap 3的规范，同时Font Awesome 5的图标类设置正确（5.x版本开始区分图标样式家族，免费版常用fas前缀标记实心图标）。补全后的典型结构应该是这样：

<nav role="navigation" aria-labelledby="block-navigationprincipale-menu" id="block-navigationprincipale">
  <ul class="menu nav navbar-nav">
    <!-- 折叠菜单项 -->
    <li class="expanded dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        主菜单 <i class="fas fa-plus" aria-hidden="true"></i>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#">子菜单选项1</a></li>
        <li><a href="#">子菜单选项2</a></li>
      </ul>
    </li>
  </ul>
</nav>

第二步：修复JS事件监听逻辑 #

Bootstrap 3的dropdown组件会触发特定的状态变化事件，我们需要监听展开完成和收起完成的事件，来切换Font Awesome的图标类。以下是完整的可运行JS代码：

$(document).ready(function() {
  // 初始化处理：如果页面加载时菜单已经是展开状态（带open类），自动切换为减号
  $('.dropdown.open').find('.fas.fa-plus').removeClass('fa-plus').addClass('fa-minus');

  // 监听菜单展开完成事件
  $('.dropdown').on('shown.bs.dropdown', function() {
    $(this).find('.fas.fa-plus').removeClass('fa-plus').addClass('fa-minus');
  });

  // 监听菜单收起完成事件
  $('.dropdown').on('hidden.bs.dropdown', function() {
    $(this).find('.fas.fa-minus').removeClass('fa-minus').addClass('fa-plus');
  });
});

关键注意点 #

• Font Awesome 5类名兼容：如果你习惯用旧版无前缀写法（比如fa fa-plus），需要确认你的Font Awesome 5.0.1引入方式是否支持兼容类（部分早期5.x版本保留了旧类名的兼容），建议优先使用fas fa-plus这种标准5.x类名。
• 事件时机选择：用shown.bs.dropdown和hidden.bs.dropdown而非show.bs.dropdown和hide.bs.dropdown，前者是动画完成后的事件，能确保图标切换时机和菜单状态完全同步。
• 依赖检查：确保你已经正确引入了jQuery（Bootstrap 3必须依赖jQuery），引入顺序必须是：jQuery → Bootstrap JS → 你的自定义JS。

如果你的菜单是用Bootstrap的collapse组件（而非dropdown）实现的折叠，只需要把事件换成shown.bs.collapse和hidden.bs.collapse，选择器对应调整为你的collapse容器即可。

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