details 与交互元素：原生折叠面板与手风琴

<details>
  <summary>常见问题：如何重置密码？</summary>
  <p>请访问登录页面，点击"忘记密码"链接，输入注册邮箱后按提示操作。</p>
</details>

<details open>
  <summary>使用说明（默认展开）</summary>
  <p>这是默认展开的说明内容，去掉 open 属性即恢复默认折叠。</p>
</details>

<details id="panel">
  <summary>实验步骤</summary>
  <ol>
    <li>新建 index.html，写好骨架</li>
    <li>添加 details 折叠区</li>
    <li>用浏览器打开验证</li>
  </ol>
</details>
<script>
  const panel = document.getElementById('panel');
  panel.addEventListener('toggle', () => {
    console.log('当前状态:', panel.open ? '展开' : '收起');
  });
</script>

/* 允许过渡到 auto 高度（如 max-content） */
:root {
  interpolate-size: allow-keywords;
}

/* 折叠体有内容过渡的空间 */
details::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 0.3s,
    content-visibility 0.3s allow-discrete;
}

details[open]::details-content {
  block-size: auto;
}

<h2>支付相关</h2>
<details class="faq">
  <summary>支持哪些支付方式？</summary>
  <p>支持微信、支付宝与银行卡快捷支付。</p>
</details>
<details class="faq">
  <summary>退款多久到账？</summary>
  <p>原路退回，一般 1-3 个工作日到账。</p>
</details>

<h2>HTML5 实验任务单</h2>
<details>
  <summary>实验一 HTML 文档结构和超链接标签</summary>
  <h3>实验内容</h3>
  <ol>
    <li>按 HTML5 骨架创建文档，声明 lang 与 charset</li>
    <li>完成站内锚点与站外链接各一处</li>
  </ol>
  <details>
    <summary>操作要点（先自己试，再展开核对）</summary>
    <ul>
      <li>锚点目标元素用 id 定位，链接写 href="#id"</li>
      <li>站外链接补 target="_blank" 与 rel="noopener"</li>
    </ul>
  </details>
</details>

<details open>
  <summary>外观设置</summary>
  <label><input type="radio" name="theme" value="light" checked /> 浅色</label>
  <label><input type="radio" name="theme" value="dark" /> 深色</label>
</details>
<details>
  <summary>编辑器设置</summary>
  <label><input type="checkbox" checked /> 显示行号</label>
  <label><input type="checkbox" /> 自动换行</label>
</details>

<details name="course">
  <summary>第一章 概念与心智模型</summary>
  <p>……</p>
</details>
<details name="course">
  <summary>第二章 环境搭建</summary>
  <p>……</p>
</details>
<details name="course">
  <summary>第三章 动手实践</summary>
  <p>……</p>
</details>

<h2>社团分享：三分钟看懂 Git</h2>
<details name="slide" open>
  <summary>第 1 页 Git 是什么</summary>
  <p>快照而非差异。没有变化的文件只存指向上次快照的引用。</p>
</details>
<details name="slide">
  <summary>第 2 页 四个区域</summary>
  <p>工作目录 → 暂存区（add）→ 本地仓库（commit）→ 远程仓库（push）。</p>
</details>
<details name="slide">
  <summary>第 3 页 分支与合并</summary>
  <p>branch 创建分支，merge 把分支汇回主线，冲突时手动取舍。</p>
</details>

<!-- 折叠：内容常驻文档流，展开后占据布局空间 -->
<details>
  <summary>阅读全文</summary>
  <p>长文内容……</p>
</details>

<!-- popover：浮层内容，不占布局，点外面自动关闭 -->
<button popovertarget="tip">查看说明</button>
<div id="tip" popover>术语解释：DOM 即文档对象模型。</div>

<!-- dialog：模态任务，屏蔽背景直到用户完成 -->
<dialog id="confirm">
  <p>确定删除这条记录吗？</p>
  <form method="dialog">
    <button value="cancel">取消</button>
    <button value="ok">确定</button>
  </form>
</dialog>

<details>
  <summary>归档条款全文</summary>
  <div id="terms" hidden="until-found">
    <p>……很长的归档文本，包含"违约金"等关键词……</p>
  </div>
</details>
<script>
  const terms = document.getElementById('terms');
  // 浏览器在 until-found 内容中找到搜索词时派发 beforematch
  terms.addEventListener('beforematch', () => {
    // 典型做法：展开所在的 details，让用户看到上下文
    terms.closest('details').open = true;
  });
</script>

<h1>帮助中心</h1>
<!-- 任务 1：独立 FAQ，退款一条默认展开 -->
<details>
  <summary>支持哪些支付方式？</summary>
  <p>微信、支付宝与银行卡。</p>
</details>
<details open>
  <summary>退款政策</summary>
  <p>签收后 7 天内可退，详见 <span id="privacy" hidden="until-found">隐私政策</span> 中的退款条款。</p>
</details>
<details>
  <summary>发票怎么开？</summary>
  <p>订单完成后在"订单详情"页申请。</p>
</details>

<!-- 任务 2：手风琴，同 name 互斥 -->
<h2>更多问题（互斥展开）</h2>
<details name="faq2">
  <summary>可以修改收货地址吗？</summary>
  <p>发货前可在订单页修改。</p>
</details>
<details name="faq2">
  <summary>如何注销账号？</summary>
  <p>设置 - 账号安全 - 注销。</p>
</details>

<!-- 任务 4：任务单答题卡，嵌套 details -->
<details>
  <summary>任务单：制作课程表</summary>
  <ol>
    <li>用 table 建表，thead 放星期</li>
    <li>tbody 放课程，行首用 th scope="row"</li>
  </ol>
  <details>
    <summary>参考答案（先自己写）</summary>
    <table border="1">
      <thead>
        <tr><th>节次</th><th>周一</th><th>周二</th></tr>
      </thead>
      <tbody>
        <tr><th scope="row">1</th><td>语文</td><td>数学</td></tr>
      </tbody>
    </table>
  </details>
</details>

<script>
  // 任务 3：查找命中时展开所在折叠区
  const privacy = document.getElementById('privacy');
  privacy.addEventListener('beforematch', () => {
    privacy.closest('details').open = true;
  });
</script>