CSS实现手风琴展开变色、闭合恢复样式的问题咨询

完全可以只用CSS实现需求，不需要JavaScript。你之前遇到的问题，核心是用错了状态伪类——focus是焦点状态，和手风琴的展开/闭合状态不绑定，换成原生<details>组件的:open伪类就能完美解决。

问题原因分析 #

1. 闭合后样式不恢复：focus仅在元素获得焦点时生效，点击其他区域失去焦点才会还原，但手风琴的展开/闭合是独立于焦点的状态，用:open伪类（<details>展开时自动触发）才能精准对应展开状态，闭合时自动移除样式。
2. 闭合时箭头消失：如果是自定义箭头，要确保默认状态就存在，仅在展开时修改样式（比如旋转），而不是只在展开时显示箭头。

实现代码示例 #

HTML结构

<details class="accordion">
  <summary class="accordion-title">手风琴标题</summary>
  <div class="accordion-content">
    这里是展开后显示的内容，可自定义任意文本或元素。
  </div>
</details>

CSS样式

/* 基础样式重置与布局 */
.accordion {
  margin: 1rem 0;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
}

.accordion-title {
  padding: 12px 16px;
  background-color: #f8f8f8;
  color: #333;
  cursor: pointer;
  position: relative;
  list-style: none; /* 隐藏原生箭头 */
  transition: background-color 0.3s, color 0.3s;
}

/* 自定义箭头 */
.accordion-title::after {
  content: "▸";
  position: absolute;
  right: 16px;
  transition: transform 0.3s;
}

/* 展开状态样式 */
.accordion:open .accordion-title {
  background-color: #2d3748;
  color: #fff;
}

.accordion:open .accordion-title::after {
  transform: rotate(90deg);
}

.accordion-content {
  padding: 12px 16px;
  border-top: 1px solid #e0e0e0;
  background-color: #fff;
}

关键说明 #

• 用HTML5原生<details>和<summary>组件，自带展开/闭合功能，无需JS。
• :open伪类专门对应<details>的展开状态，闭合时自动失效，样式自然恢复。
• 自定义箭头通过伪元素实现，默认状态显示，展开时仅修改旋转角度，避免闭合时消失。

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