手风琴折叠逻辑优化及Font Awesome 5 Unicode图标失效求助

一、实现手风琴点击新项自动关闭已展开项 #

基于你的手风琴结构，修改JavaScript逻辑即可实现该功能：

1. 给每个手风琴标题绑定点击事件，触发时先遍历所有已展开的内容和标题，移除它们的激活状态类（比如active），同时把图标切换回初始状态。
2. 再切换当前点击项的展开状态，更新对应图标。

示例代码：

const accordionTitles = document.querySelectorAll('.accordion-title');

accordionTitles.forEach(title => {
  title.addEventListener('click', () => {
    // 关闭所有已展开的项
    document.querySelectorAll('.accordion-content.active').forEach(content => {
      content.classList.remove('active');
    });
    document.querySelectorAll('.accordion-title.active').forEach(activeTitle => {
      activeTitle.classList.remove('active');
      // 把图标切回加号（f055）
      activeTitle.innerHTML = activeTitle.innerHTML.replace('', '');
    });

    // 切换当前项的状态
    const currentContent = title.nextElementSibling;
    currentContent.classList.toggle('active');
    title.classList.toggle('active');
    
    // 切换当前项图标
    if (currentContent.classList.contains('active')) {
      title.innerHTML = title.innerHTML.replace('', '');
    } else {
      title.innerHTML = title.innerHTML.replace('', '');
    }
  });
});

注：假设你的CSS是通过active类控制内容显示/隐藏（比如display: block/none），需确保类名和你的代码对应。

二、Font Awesome 5.14.5中Unicode f055、f056失效的解决办法 #

Font Awesome 5对图标做了分类拆分（实心fas、空心far等），直接用旧Unicode会出现兼容问题，可通过两种方式解决：

方式1：使用类名替代Unicode（推荐） #

直接用FA5的图标类名，避免Unicode的适配问题：

• 原f055（加号圆圈）：实心用<i class="fas fa-plus-circle"></i>，空心用<i class="far fa-plus-circle"></i>
• 原f056（减号圆圈）：实心用<i class="fas fa-minus-circle"></i>，空心用<i class="far fa-minus-circle"></i>

方式2：修正Unicode的使用方式 #

如果坚持用Unicode，必须给元素添加对应样式类（比如fas），同时确保引入了完整的FA5样式文件：

<!-- 加号圆圈 -->
<span class="fas">&#xf055;</span>
<!-- 减号圆圈 -->
<span class="fas">&#xf056;</span>

确保引入的CDN正确：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.5/css/all.min.css">

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