如何仅用CSS在Bootstrap折叠面板中隐藏和显示图标

嘿，我来帮你搞定这个小问题！其实不用复杂的JavaScript或者高深的CSS技巧，咱们利用Bootstrap折叠组件自带的状态属性就能轻松实现图标切换，完全符合你的需求～

第一步：修正HTML里的小错误 #

首先注意到你第一个按钮的data-oggle拼写错啦，应该是data-toggle，这个得改过来，不然折叠功能可能会失效哦。

第二步：给图标添加专属类 #

我们给加号和减号图标分别加上icon-plus和icon-minus类，这样后续CSS就能精准控制它们的显示状态：

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample-1" aria-expanded="false" aria-controls="collapseExample">
  <i class="fa fa-plus icon-plus" aria-hidden="true"></i>
  <i class="fa fa-minus icon-minus" aria-hidden="true"></i>
</button>

把所有按钮里的图标都按这个格式修改就好。

第三步：添加CSS控制显示逻辑 #

Bootstrap的折叠组件会自动给按钮切换aria-expanded属性（展开时为true，折叠时为false），我们就利用这个属性来写CSS：

/* 默认状态：显示加号，隐藏减号 */
.icon-minus {
  display: none;
}

/* 当面板展开时，切换图标状态 */
.btn[aria-expanded="true"] .icon-plus {
  display: none;
}
.btn[aria-expanded="true"] .icon-minus {
  display: inline-block;
}

这样就搞定啦！点击按钮时，Bootstrap会自动更新按钮的aria-expanded属性，CSS就会跟着切换图标的显示和隐藏，完全不用额外写JS逻辑，简单又可靠。

别忘了确保你已经正确引入了Font Awesome的CSS文件，不然图标可是显示不出来的哦～

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