Bootstrap折叠面板图标仅切换一次问题求助及代码排查

嘿，我看了你的代码，很快就发现了问题所在——你的jQuery代码里有两个关键错误，导致图标只能切换一次就“罢工”了，咱们来一步步修复：

问题1：类名操作时错误添加了点号 #

你在removeClass()和addClass()里给类名加了.，比如removeClass('.fas fa-angle-down')，这是不对的！这些方法接收的是纯类名字符串，不需要加CSS选择器的点号，加了之后浏览器会把带点的字符串当成类名的一部分去查找，自然找不到对应的元素，操作也就失效了。

问题2：选择器不够精准 #

当图标切换成fa-angle-up后，你再用.fa-angle-down去查找就找不到这个图标了，所以后续的切换事件根本没法触发。咱们应该换个更稳定的选择器：找到当前折叠框对应的.card-header里的.fas图标，不管它当前是向上还是向下箭头，都能精准选中。

修正后的完整代码 #

HTML部分（微调了小细节，让初始状态更规范） #

<div class="container">
  <div id="accordian">
    <div class="card">
      <div class="card-header">
        <i class="fas fa-angle-down"></i>
        <a href="#collapse1" data-toggle="collapse" class="collapsed">Asia</a>
      </div>
      <div class="card-body collapse" data-parent="#accordian" id="collapse1">
        <ul>
          <li>India</li>
          <li>China</li>
          <li>Japan</li>
        </ul>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <i class="fas fa-angle-down"></i>
        <a href="#collapse2" data-toggle="collapse" class="collapsed">Europe</a>
      </div>
      <div class="card-body collapse" data-parent="#accordian" id="collapse2">
        <ul>
          <li>Italy</li>
          <li>Germany</li>
          <li>France</li>
        </ul>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <i class="fas fa-angle-down"></i>
        <a href="#collapse3" data-toggle="collapse" class="collapsed">North America</a>
      </div>
      <div class="card-body collapse" data-parent="#accordian" id="collapse3">
        <ul>
          <li>Canada</li>
          <li>Mexico</li>
          <li>US</li>
        </ul>
      </div>
    </div>
  </div>
</div>

jQuery部分（核心修正） #

$(document).ready(function(){
  $('.collapse').on('hide.bs.collapse',function(){
    // 找到当前折叠框对应卡片里的标题图标，切换成向下箭头
    $(this).closest('.card').find('.card-header .fas')
           .removeClass('fa-angle-up')
           .addClass('fa-angle-down');
  });
  
  $('.collapse').on('show.bs.collapse',function(){
    // 找到当前折叠框对应卡片里的标题图标，切换成向上箭头
    $(this).closest('.card').find('.card-header .fas')
           .removeClass('fa-angle-down')
           .addClass('fa-angle-up');
  });
});

修正说明 #

• 去掉了类名前的.，让removeClass和addClass能正确识别并操作类名
• 用closest('.card')定位到当前折叠框所在的卡片容器，再精准找到.card-header里的.fas图标，不管图标当前是什么状态，都能准确选中切换
• 给a标签加了collapsed类，这是Bootstrap折叠组件的默认状态类，让初始交互更符合组件规范

现在你再测试一下，不管展开还是折叠多少次，图标都能正常切换啦！

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