如何使用JS实现Bootstrap手风琴菜单的加减号图标切换？

看起来你的问题核心是没有监听Bootstrap Collapse组件的状态变化事件，导致Font Awesome的加号/减号图标无法随菜单展开/收起切换。下面是完整的修复方案：

第一步：确保HTML结构正确 #

先补全并规范你提供的HTML（确保图标元素正确嵌套在触发按钮内）：

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading panel-like">
      <!-- 初始状态带collapsed类，图标默认用fa-plus -->
      <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
        <i class="fa fa-plus"></i> 菜单标题1
      </a>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
        菜单内容区域1
      </div>
    </div>
  </div>
  <!-- 可复制panel结构添加更多菜单 -->
  <div class="panel panel-default">
    <div class="panel-heading panel-like">
      <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
        <i class="fa fa-plus"></i> 菜单标题2
      </a>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        菜单内容区域2
      </div>
    </div>
  </div>
</div>

第二步：添加状态监听的JavaScript代码 #

Bootstrap 3的Collapse组件会触发show.bs.collapse（展开前）和hide.bs.collapse（收起前）事件，我们可以利用这两个事件切换图标类：

// 监听菜单展开事件
$('#accordion').on('show.bs.collapse', function(e) {
  // 找到当前展开面板对应的标题栏图标，替换为减号
  $(e.target).prev('.panel-heading').find('i')
    .removeClass('fa-plus')
    .addClass('fa-minus');
});

// 监听菜单收起事件
$('#accordion').on('hide.bs.collapse', function(e) {
  // 找到当前收起面板对应的标题栏图标，替换为加号
  $(e.target).prev('.panel-heading').find('i')
    .removeClass('fa-minus')
    .addClass('fa-plus');
});

关键注意事项 #

• 确保你已经正确引入了jQuery（Bootstrap 3依赖jQuery，必须在Bootstrap JS之前引入）
• 如果你用的是Font Awesome 5的SVG核心版本，图标类名要改为fas fa-plus/fas fa-minus（多了s标识solid样式），要根据你的引入方式调整
• 初始状态下，触发按钮必须带collapsed类，图标默认是fa-plus，和收起状态对应

这样调整后，手风琴菜单展开时图标会自动切换为减号，收起时切回加号，完美实现你要的效果~

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