html - 使用按钮在我的电子邮件中隐藏/显示表格

Question

最近我正在设置用于发送电子邮件并使用 html/css 设置样式的代码。虽然有人认为邮件文本非常困惑，并且有想法创建一个显示或隐藏表格的按钮(所以显示更多或显示更少按钮)。

这在普通网页中不会有太大问题，因为它允许在其中使用 javascript、jquery 或纯编码，但是这在邮件中是不允许的(大多数邮件客户端不支持) .

所以问题是，是否可以在我的电子邮件中提供一个按钮功能，以便它显示或隐藏我电子邮件正文中的特定表格？如果是这样，怎么办？

这是我目前为我的电子邮件准备的一些代码:

sBody="<font face=""Verdana, Arial"" size=2 color=""black"">Dear " & FirstName & ",<br><br>"
                sBody=sBody & "Recently you made a ticket concerning '<b>" & FormSubject &  "</b>'.<br>"
                sBody=sBody & "We will try to answer your question as quick as possible." & "<br><br>"

            sBody=sBody &  "<br>"

            sBody=sBody & "<table cellspacing=""0"" cellpadding=""0""><tr>" 
            sBody=sBody & "<td align=""center"" width=""200"" height=""35"" bgcolor=""#000091"" style=""-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;"">"
            sBody=sBody & "<a href=""http://www.EXAMPLE.com/"" style=""font-size:16px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block""><span style=""color: #FFFFFF"">Show ticket information</span></a>"
            sBody=sBody & "</td></tr> </table>"

            sBody=sBody &  "<table id=""tickethide"" style=""display: none;"">"
            sBody=sBody &  "<tr><th style=""border: 1px solid black;""><font face=""Verdana, Arial"" size=2 color=""#000080"">Send date</th><th style=""border: 1px solid black;""><font face=""Verdana, Arial"" size=2 color=""#000080"">For department</th><th style=""border: 1px solid black;""><font face=""Verdana, Arial"" size=2 color=""#000080"">Type of ticket</th><th style=""border: 1px solid black;""><font face=""Verdana, Arial"" size=2 color=""#000080"">Subject</th><th style=""border: 1px solid black;""><font face=""Verdana, Arial"" size=2 color=""#000080"">Ticket description</th></tr>"

            sBody=sBody &  "<tr bgcolor=""#BEC0F7"">" 

我没有在这里粘贴所有正文，因为它会产生对这个问题无用的代码溢出。另请注意，我在经典的 ASP 文件中编程(并设置此电子邮件)，所以这就是我使用 & 和双“”的原因。创建的按钮现在也使用 href，但一旦它具有显示/隐藏功能，它将被忽略。

Answer 1

免责声明:我不确定这能否以一种万无一失的方式完成。我的方法涉及相当现代的 CSS，所以我不知道它适用于哪些电子邮件客户端。它适用于 SeaMonkey，但我没有可用于测试的 MS Office。

诀窍是使用复选框，该复选框在检查时，使用CSS“ sibling ”选择器可见以下 block 。无需 Javascript。

<style>
#showtable + label {color:blue; text-decoration:underline; cursor:pointer}
#showtable, #table {display:none}
#showtable:checked ~ #table {display:block;}
</style>

<font face="Verdana, Arial" size=2 color="black">Dear [[FirstName]] ,<br><br>
Recently you made a ticket concerning '<b> [[FormSubject]] </b>'.<br>
We will try to answer your question as quick as possible. <br><br>

<input type="checkbox" id="showtable" />
<label for="showtable">Click to show or hide the table</label>

<br><br>
<font id="table" color="#99FFDD" size=3>
<table cellspacing="0" cellpadding="0" bgcolor="#006633">
<tr><td>This is the table</td></tr>
<tr><td>with the information</td></tr>
</table>
</font>

这是一个JSFiddle您可以在哪里进行实时测试，当然那是一个普通的网页。对于真正的测试，请将 HTML 通过电子邮件发送给您自己。确保包括 <style> block 。