HTML的details和summary怎么配合实现手风琴折叠不靠JS-html教程-PHP中文网

details标签原生支持手风琴折叠，无需js即可实现展开/收起，但默认为多选独立模式；要实现单选互斥需js，css仅能模拟；summary必须为details第一个子元素，图标旋转用[open]伪类控制，且需注意无障碍与兼容性。

html的details和summary怎么配合实现手风琴折叠不靠js

details标签默认行为就是手风琴折叠的核心

原生 <details></details> 标签自带展开/收起状态管理，不需要任何 JS 就能响应点击。它的子元素 <summary></summary> 是唯一可点击触发切换的区域，浏览器自动处理状态切换和 ARIA 属性（如 aria-expanded），且支持键盘操作（空格/回车）。

关键点：<summary></summary> 必须是 <details></details> 的**第一个子元素**，否则无法触发折叠逻辑；后续所有内容都会被折叠/展开。

多个details并列时默认各自独立，不自动互斥

如果你希望“点一个，其他收起”（典型手风琴效果），<details></details> 本身不提供这个行为——它天生是独立开关。要纯 HTML 实现互斥，目前**没有标准方案**，必须借助 CSS 或 JS。

但有一个实用妥协：用 CSS 的 :has() 配合相邻兄弟选择器，在支持的浏览器中模拟单开效果（注意兼容性）：

<details class="accordion-item"><summary>标题1</summary><p>内容1</p>
</details><details class="accordion-item"><summary>标题2</summary><p>内容2</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
														src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
													<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
</details>

然后加这段 CSS（仅 Chromium 119+ / Safari 17.4+ 支持）：

.accordion-item:has(> summary:not([open])) + .accordion-item {
  margin-top: 0;
}
.accordion-item:not(:first-child):has(> summary[open]) ~ .accordion-item {
  margin-top: 0;
}
/* 实际互斥需 JS，CSS 只能隐藏其他内容，但无法真正 close 其他 details */

所以：纯 HTML + CSS 实现“真手风琴”仍不可靠，<details></details> 天然适合多选折叠，不是单选。

summary里的图标旋转需要CSS控制open状态

想让 <summary></summary> 右侧显示 ▶️ 或 ▼ 图标，并随展开/收起旋转，不能靠 JS 监听事件，得用 CSS 的 <details>[open] > summary::after</details> 伪元素：

<summary></summary> 本身不能设 content，必须写在父级 <details></details> 的条件选择器里
推荐用 SVG 或 Unicode 字符（如 \25BC ▼），避免字体加载问题
旋转动画需显式声明 transition，否则切换生硬

示例：

details summary::after {
  content: " ▶";
  transition: transform 0.2s;
}
details[open] summary::after {
  content: " ▼";
  transform: rotate(0deg);
}