Chevron FAQ List
介绍
细线分隔的极简问答列表，基于原生 details：悬停问题变紫，展开时右侧箭头翻转并变色，答案轻微下滑淡入；同一时间只展开一项，没有脚本也能正常折叠。
拆自整页模板 棱页 设计提示词库首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Chevron FAQ List 加进你的项目并换成你的配色。
适用场景
常见问题（FAQ）、折叠面板、可展开的说明和设置分组。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add chevron-faq-list
mcp › 使用 8pt MCP 调用 get_component("chevron-faq-list")
代码
Chevron FAQ List 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-cfq"><h3 class="cfq-h"><em>有疑问？</em>这里有答案。</h3><details open><summary>入门版真的不收钱吗？<i><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></summary><p>是的。入门版每天赠送一定点数，可以浏览全部公开资源并试用建站器，不需要绑定银行卡。</p></details><details><summary>棱页能配合哪些 AI 工具？<i><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></summary><p>常见的 AI 建站与编程工具都可以：复制提示词后粘贴进去即可，也可以通过 MCP 直接调用资源库。</p></details><details><summary>入门版和会员有什么区别？<i><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></summary><p>会员可以不限量复制提示词、查看模板与区块源码，并使用全部会员资源和 MCP。</p></details><details><summary>多久上新一次模板和区块？<i><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></summary><p>每周都会上新，会员可第一时间使用。</p></details><details><summary>“终身”具体指什么？<i><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></summary><p>一次付费后，只要棱页持续运营，你都能使用会员资源与后续更新。</p></details><details><summary>浏览器插件需要单独购买吗？<i><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></summary><p>不需要，插件包含在会员权益里。</p></details><details><summary>可以用在客户项目上吗？<i><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></summary><p>可以，个人与客户项目都能使用。</p></details><details><summary>可以和团队共用账号吗？<i><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></summary><p>一个账号仅限一人使用，团队方案请联系我们。</p></details><details><summary>退款政策是怎样的？<i><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></summary><p>开通后 7 天内如不满意，发邮件到 name@example.com 即可申请退款。</p></details><details><summary>还有其他问题，怎么联系你们？<i><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></summary><p>发邮件到 name@example.com，我们会尽快回复。</p></details></div>
.x-cfq{--ink:#0B0B0F;--pur:#7C3AED;--pur2:#A78BFA;--pur3:#EDE9FE;--mut:#6B6B76;--line:#E8E8EC;font-family:"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-align:left}.x-cfq,.x-cfq *{box-sizing:border-box}.x-cfq a{color:inherit;text-decoration:none}.x-cfq button{font:inherit;cursor:pointer}.x-cfq{width:100%;max-width:640px;margin:0 auto;color:var(--ink);border-top:1px solid #E4E4E0}.x-cfq details{border-bottom:1px solid #EDEDE8}.x-cfq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font-size:15px;font-weight:500;cursor:pointer;transition:color .2s}.x-cfq summary::-webkit-details-marker{display:none}.x-cfq summary:hover{color:var(--pur)}.x-cfq summary i{display:grid;place-items:center;color:#A1A1AA;transition:transform .3s,color .3s}.x-cfq details[open] summary i{transform:rotate(180deg);color:var(--pur)}.x-cfq p{margin:0;padding:0 32px 18px 0;font-size:14px;line-height:1.75;color:#52525B;animation:cfq-in .35s ease}@keyframes cfq-in{from{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion:reduce){.x-cfq *{animation:none!important;transition:none!important}}.x-cfq{max-width:none;padding:40px 5%;background-image:radial-gradient(rgba(16,16,24,.16) 1.1px,transparent 1.4px);background-size:18px 18px;background-position:center}.x-cfq{border-top:0}.x-cfq details{max-width:640px;margin:0 auto}.x-cfq details:first-of-type{border-top:1px solid #E4E4E0}.x-cfq .cfq-h{font-family:"Noto Serif SC",serif;font-size:46px;font-weight:400;text-align:center;margin:0 0 34px;letter-spacing:-.02em}.x-cfq .cfq-h em{color:#8A8A94}.x-cfq{width:1200px;max-width:100%;box-sizing:border-box}(root) => {
const items = [...root.querySelectorAll('details')];
const onT = (e) => { const d = e.currentTarget; if (d.open) items.forEach(o => { if (o !== d) o.open = false; }); };
items.forEach(d => d.addEventListener('toggle', onT));
return () => items.forEach(d => d.removeEventListener('toggle', onT));
}订阅 Builder 查看完整源码。查看价格