Bootstrap Glyphicon-plus点击无响应，疑jQuery代码有误求指导

看起来你遇到的问题是折叠面板展开/隐藏时，加号/减号图标没法正常触发切换逻辑对吧？我帮你梳理下可能的问题和修正方案：

首先，先看你现有代码里的几个潜在问题：

• 你用了closest('div#aa')，但ID是全局唯一的，直接用#aa选择就够了，不用额外加div前缀；而且如果你的折叠面板和触发按钮的DOM结构不是a在#aa前面的话，这个选择器直接就失效了。
• 你的代码片段里hidden.bs.collapse事件的处理函数没写完，这肯定会导致逻辑不完整，没法完成图标的反向切换。

假设你的DOM结构是Bootstrap折叠面板的常见结构（类似下面这样）：

<a href="#collapseContent" data-toggle="collapse">
  <span class="glyphicon glyphicon-plus"></span> 展开内容
</a>
<div id="collapseContent" class="collapse">
  <!-- 折叠的内容区域 -->
</div>

那修正后的完整jQuery代码应该是这样的：

// 确保DOM加载完成后再执行代码
$(document).ready(function(){
  // 绑定折叠面板展开事件
  $('.collapse').on('shown.bs.collapse', function () {
    // 找到对应的触发按钮里的图标，切换成减号
    $(this).prev('a').find('.glyphicon-plus').removeClass('glyphicon-plus').addClass('glyphicon-minus');
  }).on('hidden.bs.collapse', function () {
    // 折叠面板隐藏时，切换回加号
    $(this).prev('a').find('.glyphicon-minus').removeClass('glyphicon-minus').addClass('glyphicon-plus');
  });
});

如果你的DOM结构里触发按钮和折叠面板不是直接相邻的（比如中间隔了其他容器），可以通过共同父容器来定位触发按钮，比如：

$(document).ready(function(){
  $('.collapse').on('shown.bs.collapse', function () {
    $(this).closest('.panel').find('a[data-toggle="collapse"]').find('.glyphicon-plus').removeClass('glyphicon-plus').addClass('glyphicon-minus');
  }).on('hidden.bs.collapse', function () {
    $(this).closest('.panel').find('a[data-toggle="collapse"]').find('.glyphicon-minus').removeClass('glyphicon-minus').addClass('glyphicon-plus');
  });
});

另外还要注意两个关键点：

• 确保你已经正确引入了jQuery和Bootstrap的JS文件，而且加载顺序必须是先jQuery后Bootstrap。
• 一定要把JS代码放在$(document).ready()回调里，避免DOM还没加载完成就执行代码，导致找不到目标元素。

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