是否可以在电子邮件中折叠/展开 DIV？哪些客户支持这一点？

Posted 2023-02-25

【中文标题】是否可以在电子邮件中折叠/展开 DIV？哪些客户支持这一点？

【英文标题】：Is it possible to collapse/expand a DIV within an email? What clients support this?

【发布时间】：2021-12-02 14:03:53

【问题描述】：

我有一个通过电子邮件发送警报的警报系统。我想包含诊断信息，但仅在最终用户单击 [+] 按钮时才可见。

这可以在电子邮件中完成吗？我可以不使用 javascript 而只使用 CSS 吗？

如果有帮助，我的大多数客户都会使用 Outlook、iPhone 或 Blackberries

【参考方案1】：

很可能，不是。由于病毒和其他原因，许多客户端都禁用了 JS。

一种解决方法可能是包含一个包含所有详细信息的完整错误页面的 URL，并编辑您的邮件以仅汇总诊断信息。

另外，您可以尝试看看是否可以使用:hover CSS 来显示带有一些讨厌的选择器的元素... CSS3 样式？ http://www.campaignmonitor.com/css/

【参考方案2】：

我认为你不能，由于安全问题，电子邮件客户端不允许你运行 javascript 代码。而且你不能只使用 CSS 做你想做的事。

【参考方案3】：

没有js就无法响应点击事件

您可以尝试在 css 上使用 :hover 的方法，但我不确定有多少电子邮件客户端支持它

【参考方案4】：

您可以使用复选框来执行此操作，但我不知道它是否与跨电子邮件客户端兼容。我会彻底检查它。以下是更多信息：

Reveal and hide a div on checkbox condition with css

网络上还有大量其他示例。这是一个非常好的使用汉堡菜单的 Litmus 示例：

https://litmus.com/community/discussions/999-hamburger-in-email

这是简化版：

<style>
#hidden-checkbox:checked + div #menu
  ... css to display menu ...

</style>
<input id="hidden-checkbox" type="checkbox">
<div>
  <label for="hidden-checkbox">Hamburger Button</label>
  <div id="menu">Menu Content...</div>
</div>

【参考方案5】：

基于Eoin 的https://***.com/a/31743982/2075630，但使用类来避免为此使用ID。

编辑。 对我来说，它适用于独立的 html 文件，但不适用于电子邮件；在 Thunderbird 中，复选框是不可更改的，并且在 Gmail 中 <style> 标签在显示电子邮件之前被剥离并作为内联 style 属性静态应用。后者可能意味着，没有办法让它适用于 Gmail 收件人，对于 Thunderbird 我不确定。

小例子

<style>
.foldingcheckbox:not(:checked) + *  display: none 
</style>
<input type="checkbox" class="foldingcheckbox" checked/>
<div class=>Foldable contents</div>

.foldingcheckbox:not(:checked) 选择所有具有折叠复选框类的未选中复选框。

.foldingcheckbox:not(:checked) + * 选择直接在此类复选框之后的任何元素。

.foldingcheckbox:not(:checked) + * display: none 隐藏这些元素。

属性checked 使得复选框的默认状态被选中。省略时，默认状态为不选中复选框。至少在这个简单的示例中，重新加载页面时会保留状态。

更大，视觉上更吸引人，示例

为了演示它如何用于更大的示例：

<style>
.foldingcheckbox  float: right; 
.foldingcheckbox:not(:checked) + *  display: none 
h1, h2  border-bottom: solid black 1pt 
div  border: 1px solid black; border-radius: 5px; padding: 5px 
</style>
<h1>1. Hello there</h1>
<input class="foldingcheckbox" type="checkbox" checked/>
<div>
  <p>Hello World.</p>
  <p>This is a test.</p>
  <h2>1.2. Nesting possible!</h2>
  <input class="foldingcheckbox" type="checkbox" checked/>
  <div>
    <p>Hello World.</p>
    <p>This is a test.</p>
  </div>
</div>
<h1>2. More things.</h1>
<input class="foldingcheckbox" type="checkbox" checked/>
<div>
  <p>This is another test.</p>
  <p>This is yet another test.</p>
</div>