FAQ折叠交互实现：点击单个按钮时自动关闭其他展开项并精简代码

核心优化目标 #

• 实现手风琴联动效果：点击任意FAQ项展开内容时，自动收起其余所有已展开的条目
• 移除现有冗余的重复代码，降低后续维护成本
• 保持原有视觉布局与交互手感不变

原代码存在的问题 #

• 为每个按钮、文本、段落、箭头图标单独设置独立id，每新增一个FAQ条目就需要复制一整段重复的绑定逻辑和函数
• 全局单变量arrowstatus的状态逻辑存在缺陷，无法跟踪多个条目的独立状态，甚至存在给DOM节点随意添加自定义s属性的无效代码
• 所有样式调整都通过JS逐行修改元素内联样式实现，没有做到样式与交互逻辑分离，后期调整视觉效果需要修改多处JS代码

优化后完整实现代码 #

调整后的HTML #

保留原有布局结构，移除所有独立id，为每个FAQ条目添加统一类名：

<ul>
  <h1>FAQ</h1>
  <li class="faq-item">
    <button type="button">
      <span>How many team members can I invite?</span>
      <img src="images/icon-arrow-down.svg" alt="arrow down icon" class="arrowimage">
    </button>
    <p>You can invite up to 2 additional users on the<br>Free plan.There is no limit on team members for <br>the Premium plan.</p>
  </li>
  <li class="faq-item">
    <button type="button">
      <span>What is the maximum file upload size?</span>
      <img src="images/icon-arrow-down.svg" alt="arrow down icon" class="arrowimage">
    </button>
    <p>No more than 2GB. All files in your account must<br>fit your allotted storage space.</p>
  </li>
  <li class="faq-item">
    <button type="button">
      <span>How do I reset my password?</span>
      <img src="images/icon-arrow-down.svg" alt="arrow down icon" class="arrowimage">
    </button>
    <p>Click “Forgot password” from the login page or<br>“Change password” from your profile page.<br>A reset link will be emailed to you</p>
  </li>
  <li class="faq-item">
    <button type="button">
      <span>Can I cancel my subscription?</span>
      <img src="images/icon-arrow-down.svg" alt="arrow down icon" class="arrowimage">
    </button>
    <p>Yes! Send us a message and we’ll process your<br>request no questions asked.</p>
  </li>
  <li class="faq-item">
    <button type="button">
      <span>Do you provide additional support?</span>
      <img src="images/icon-arrow-down.svg" alt="arrow down icon" class="arrowimage">
    </button>
    <p>Chat and email support is available 24/7. Phone<br>lines are open during normal business hours.</p>
  </li>
</ul>

调整后的CSS #

保留原有基础样式，新增激活状态的样式规则，把原来需要JS控制的样式全部移到CSS类中：

ul {
  width: fit-content;
  position: absolute;
  top: 30px;
  right: 60px;
  list-style-type: none;
}
h1 {
  position: relative;
  left: -40px;
  color: hsl(238, 29%, 16%);
}
li {
  width: 400px;
  position: relative;
  left: -40px;
  padding-top: 10px;
  padding-bottom: 5px;
  color: hsl(240, 6%, 50%);
  border-bottom: 2px solid hsl(240, 5%, 91%);
}
button {
  width: 100%;
  height: 25px;
  border: none;
  outline: none;
  margin-bottom: 15px;
  background-color: inherit;
  color:hsl(240, 6%, 50%);
  cursor: pointer;
}
button:hover {
  color: hsl(14, 88%, 65%);
}
span {
  position: absolute;
  left: 0;
  font-size: 17px;
}
.arrowimage {
  float: right;
  padding-top: 5px;
  transition: transform 0.2s ease;
}
p {
  margin-top: 0;
  display: none;
  line-height: 25px;
}
/* 新增激活状态样式 */
.faq-item.active p {
  display: block;
}
.faq-item.active span {
  font-weight: bold;
  color: hsl(238, 29%, 16%);
}
.faq-item.active .arrowimage {
  transform: scaleY(-1);
  margin-top: 5px;
}

精简后的JS逻辑 #

全量逻辑仅需十数行，不需要为每个按钮单独绑定事件，自动适配任意数量的FAQ条目：

// 获取所有FAQ条目元素
const faqItems = document.querySelectorAll('.faq-item');
// 遍历为每个条目绑定点击事件
faqItems.forEach(item => {
  const btn = item.querySelector('button');
  btn.addEventListener('click', () => {
    // 遍历所有条目，清除非当前点击条目的激活状态
    faqItems.forEach(otherItem => {
      if (otherItem !== item) otherItem.classList.remove('active');
    })
    // 切换当前条目的激活状态（支持点击已展开的条目自动收起）
    item.classList.toggle('active');
  })
})

实现效果说明 #

• 点击任意FAQ按钮时，会自动将所有其他已展开的条目收起，仅保留当前点击项的展开状态
• 点击已经处于展开状态的按钮，会直接收起当前条目，符合原有的交互预期
• 后续新增FAQ条目时，只需要在HTML中复制一个带faq-item类的li结构即可，不需要再修改任何JS代码

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