HTML电子邮件中的可折叠表(Outlook 2007-2010)

时间:2011-10-25 23:27:59

标签: html css outlook outlook-2007 html-email

我过去发过各种HTML电子邮件,并且已经看到了与之相关的相当大的限制。我真正需要的是能够拥有具有显示/隐藏功能的区域 - 单击加号或标题来切换。

我认为JS不合适,CSS可能是可能的。我只需要它在Outlook 2007-2010中工作。有什么建议吗?

谢谢!

2 个答案:

答案 0 :(得分:6)

您可以使用锚标记在Outlook中执行此操作。诀窍是创建2个表,这些表由一个指定了较大高度的td单元分隔,这样就不会看到第二个表。

两个表都是完全相同的,除了表1有show链接,而表2有你想要显示的内容,以及一个隐藏链接。

单击锚标记时,电子邮件会向下移动到第二个表中指定的位置。由于两个表中的内容除了显示/隐藏框可见性之外是相同的,因此您创建了一个幻灯片,表示该框正在切换。

如果您有多个显示/隐藏框,则需要创建更多表格。电子邮件会很长,但切换效果仍然可以在Outlook中使用。

锚标记:

<a href="#section1">Click here to show content</a>
<a name="section1"></a>

以下是一个简单示例:http://jsfiddle.net/mjcookson/nq3Re/

更新评论:此外,您的电子邮件可能无法填满整个视口,因此表格之间的间隔用于避免在第一个表格之后立即看到第二个表格。

答案 1 :(得分:2)

你不能在Outlook中这样做。它的HTML电子邮件呈现引擎非常糟糕。我已经看到它适用于移动webkit和Android浏览器。

请参阅此文章:http://coding.smashingmagazine.com/2011/08/18/from-monitor-to-mobile-optimizing-email-newsletters-with-css/