手风琴模块
用于让长邮件保持易于浏览的可展开区块——常见问题、订单详情、条款说明——不必强迫每一位收件人把全部内容都读一遍,无论他们是否需要。
工作原理
邮件与托管的实时预览刻意使用两套不同的实现,而不是共用同一份标记结构。在实时预览中,也就是一个真正的浏览器环境里,每个条目都是原生的 <details>/<summary> 元素。这比 CSS 技巧更具无障碍性:可以用键盘操作,自带原生的展开/折叠标记,并且开箱即用地兼容屏幕阅读器,因此没有理由为了和邮件渲染器共用代码而放弃这些优势。
在已发送的 HTML 中,<details> 元素在各个邮件客户端中的支持并不一致,因此每个条目改用与轮播图、刮刮卡模块相同的隐藏复选框加 <label> 的 :checked 技术。具体做法是:一个隐藏的复选框、一个被样式化为可点击标题的 <label>,以及一个在复选框被勾选之前保持 display:none 的内容 <div>。一旦勾选,#item-id:checked ~ .acc-content{display:block} 这条规则就会将其显示出来。每个条目都独立切换;不存在"同一时间只能展开一项"的行为。
在这套 CSS 技术不被支持的地方(Outlook 的 Word 排版引擎,或是会剥离 <style> 代码块的客户端),降级方案不是跳转到别处的链接——而是最安全的默认状态:每个条目都以已展开的状态渲染。任何内容都不会被隐藏在客户端无法执行的手势背后,因此使用精简版客户端的收件人会直接看到完整的常见问题或完整的订单详情,只是少了折叠/展开的交互效果。这与刮刮卡模块揭晓奖品时所用的"安全默认值"模式如出一辙。
可配置字段:
- 背景色、内边距、边框(宽度/样式/颜色)和圆角半径——应用于手风琴的外层卡片,由所有条目共享。
每个手风琴条目(一个子节点,可独立添加/重新排序)包含:
- 标题——始终可见的头部文字,点击即可展开/折叠。
- 内容——展开后显示的正文文字,渲染时会保留换行。
- 每个条目各自独立的标题颜色/标题字号和内容颜色/内容字号,方便让一条警示或重点常见问题条目在同类条目中脱颖而出。
手风琴是纯内容模块,与文本或图片模块一样——展开一个条目并不是一次互动事件。收件人打开过哪些条目不会被记录,该模块也从不会出现在响应仪表盘、CSV 导出或项目 Webhook 中。
示例
Subject
Your order questions, answered
在产品发布或新用户引导邮件的末尾放一个常见问题区块,可以让主要信息保持简短,同时依然回答大家都会问的那五个问题。不需要细节的收件人永远不会看到它被展开,而需要细节的收件人即便所用客户端一开始就无法折叠,也依然能拿到完整展开的降级版本。一封订单确认邮件可以把物流详情、退货政策和分项价格折叠进三个收起的区块,而不是堆成一整墙文字。一封通讯简报回顾邮件可以每条新闻用一个条目,标题作为手风琴标题,两句话摘要作为内容,让收件人先浏览标题,只展开自己感兴趣的部分。
静态回退效果是什么样子
<div style="border:1px solid #e5e7eb;border-radius:6px;padding:10px 14px;margin-bottom:8px" id="em-acc-1">
<label for="em-acc-1-t" style="display:block;margin:0;font-weight:600;font-size:15px;color:#111827;cursor:pointer">
Do you offer refunds?
</label>
<div class="acc-content" style="margin:8px 0 0;font-size:14px;color:#111827">
Yes — within 30 days of purchase, no questions asked.
</div>
</div>
这里省略了隐藏复选框及其 :checked 样式规则,因为它们被包裹在仅动态层级才会执行的代码块中——在跳过这部分的客户端中,.acc-content 没有任何规则会隐藏它,因此会像上面这样默认以展开状态渲染。