【发布时间】：2011-12-15 08:55:12
【问题描述】：
我过去曾发送过各种 HTML 电子邮件，并且看到了与之相关的相当大的限制。我真正需要的是具有显示/隐藏功能的区域的能力 - 单击加号或标题进行切换。
我认为 JS 是不可能的，CSS 可能是一种可能性。我只需要它在 Outlook 2007-2010 中工作。有什么建议吗？
谢谢！
【问题讨论】：
标签： html css outlook outlook-2007 html-email
【发布时间】：2011-12-15 08:55:12
【问题描述】：
您可以在 Outlook 中使用锚标记来执行此操作。诀窍是创建 2 个表格，这些表格由 td 单元格分隔，并指定了很大的高度，这样您就看不到第二个表格。
除了表 1 有显示链接，而表 2 有您要显示的内容和隐藏链接之外，这两个表都是完全相同的。
当您单击锚标记时，电子邮件会向下移动到第二个表格中指定的位置。由于除了显示/隐藏框可见性之外，两个表中的内容相同，因此您创建了框正在切换的错觉。
如果您有多个显示/隐藏框，则需要创建更多表格。电子邮件会变得很长，但切换效果在 Outlook 中仍然有效。
锚标签：
<a href="#section1">Click here to show content</a>
<a name="section1"></a>
这是一个简单的例子：http://jsfiddle.net/mjcookson/nq3Re/
更新评论：此外，您的电子邮件可能不会填满整个视口，因此表格之间的间隙用于避免在第一个表格之后立即看到第二个表格。
【讨论】：
-
有趣的想法，谢谢玛丽莎！我并没有 100% 理解关于最后一个 td 高度较大的部分，以避免看到第二个。因此，所有表格始终可见，但您基本上是在电子邮件中移动？
-
是的，没错 - 您正在围绕电子邮件移动。表格之间存在间隙，因此当用户向下滚动时，他们不会立即看到另一个与他们刚刚阅读的内容相同的表格。用一个例子更新了答案。
-
在 Outlook 2010 中不起作用。显示所有内容。有趣的是，在生成的大型电子邮件中使用它时会发生内存泄漏。
您无法在 Outlook 中执行此操作。它的 HTML 电子邮件渲染引擎非常糟糕。我已经看到它适用于移动 webkit 和 android 浏览器。
【讨论】：