组件

Accordion 手风琴

折叠面板；基于原生 <details>；pvs-accordion__title（summary）:focus-visible 焦点环。

默认

多个 details.pvs-accordion 叠放；open 属性控制默认展开。

第一节

第一节正文，可放任意块级内容。

第二节

第二节默认收起。

<details class="pvs-accordion" open>
  <summary class="pvs-accordion__title">第一节</summary>
  <div class="pvs-accordion__body">第一节正文，可放任意块级内容。</div>
</details>
<details class="pvs-accordion">
  <summary class="pvs-accordion__title">第二节</summary>
  <div class="pvs-accordion__body">第二节默认收起。</div>
</details>

扁平

pvs-accordion--flush 去掉左右边框，适合嵌在卡片或列表里。

Flush 样式

无左右边框，与容器对齐。

<div class="pvs-border pvs-p-4" style="max-width:20rem">
  <details class="pvs-accordion pvs-accordion--flush" open>
    <summary class="pvs-accordion__title">Flush 样式</summary>
    <div class="pvs-accordion__body">无左右边框，与容器对齐。</div>
  </details>
</div>

Single panel

仅一个 details 时与 FAQ 区块相同；无需额外 JS。

常见问题

PivCSS 零构建，引入 CSS 即可。

<details class="pvs-accordion" open>
  <summary class="pvs-accordion__title">常见问题</summary>
  <div class="pvs-accordion__body">
    <p class="pvs-m-0">PivCSS 零构建，引入 CSS 即可。</p>
  </div>
</details>

结构

details.pvs-accordion → summary.pvs-accordion__title + div.pvs-accordion__body

类名速查

类名	说明
`pvs-accordion`	根容器
`pvs-accordion__title`	可点击标题（summary）
`pvs-accordion__body`	折叠内容区
`pvs-accordion--flush`	无左右边框