Hide/Show table 在我的电子邮件中使用按钮

Question

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

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

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

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

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，但一旦它具有 show/hide 功能，它将被忽略。

Answer 1

免责声明：我不确定这是否可以以故障安全的方式完成。我的方法涉及相当现代的 CSS，所以我不知道它适用于哪些电子邮件客户端。它适用于 SeaMonkey，但我没有 MS Office 可以测试。

诀窍是使用复选框，该复选框在检查时，使用a CSS "sibling"选择器可见以下块。不需要 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> 块。

Hide/Show table 在我的电子邮件中使用按钮

Hide/Show table in my Email with the use of a button

html

css

email