手风琴折叠

问答一条条收起，点标题展开答案——原生 details 零 JS

全平台通用动效与背景内容区效果

实时预览（拖动参数，立刻看变化）

代码

<details open><summary>这个站收费吗？</summary><div class="a">核心资源库永久免费。</div></details>
<style>
details { border-bottom: 1px solid #d8d5cd; }
summary { list-style: none; cursor: pointer; padding: 13px 2px; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 17px; color: #8A8781; transition: transform .25s; }
details[open ] summary::after { transform: rotate(45deg); }
.a { padding: 0 2px 14px; color: #55534e; line-height: 1.7; }
</style>
<!-- 原生 details/summary：零 JS、自带键盘可达 -->

<details class="border-b border-[#d8d5cd]" open><summary class="flex cursor-pointer list-none items-center justify-between py-[13px] font-semibold [&::-webkit-details-marker]:hidden">问题<span class="text-neutral-400">+</span></summary><div class="pb-[14px] leading-relaxed text-neutral-500">答案</div></details>

export function Faq({ q, a, defaultOpen }) {
  return (<details open={defaultOpen} style={{ borderBottom: "1px solid #d8d5cd" }}>
    <summary style={{ listStyle: "none", cursor: "pointer", padding: "13px 2px", fontWeight: 600 }}>{q}</summary>
    <div style={{ padding: "0 2px 14px", color: "#55534e", lineHeight: 1.7 }}>{a}</div>
  </details>);
}

代码片段以 MIT 释出，可自由复制改用。

这个效果是怎么实现的

它是怎么工作的（中文）

HTML 自带 details/summary 元素：点击展开、自带键盘可达、零 JavaScript。要做的只有样式：去掉默认小三角，换成一个会旋转 45° 变成 × 的加号。需要「同时只开一个」时给 details 加同一个 name 属性（现代浏览器支持）。

How it works (English)

HTML's details/summary elements expand on click, are keyboard-accessible, and need no JavaScript. Styling is all that's left: remove the default marker and use a plus that rotates 45° into an ×. For 'only one open at a time', give the details elements the same name attribute (modern browsers support it).

参考与来源 Sources

本条为「批次 1（重建）」成果（2026-11-10 用户决定：原妞妞老师素材不导出，改由公开材料重建）：效果概念参考开源效果生态——Magic UI（MIT）、Uiverse（MIT）、Animista、Paper Shaders（Apache-2.0）、tsParticles（MIT）、CSS Loaders（MIT）等（见 /resources 对应条目，许可以各项目为准）；本站的实现代码、参数体系与全部文案均为 Aglaia 原创，未复制上述项目的代码或文案，也与妞妞老师原始素材无关。

配套提示词

手风琴折叠 · 提示词待复验 · →