我试图使用响应式CSS动画延迟，当用户点击连接到没有Javascript且只有HTML / CSS的表的箭头时，会发生手风琴类型的操作。
当您将屏幕调整为移动设备时，请参阅此处：hxxp：//responsiveemailpatterns.com/patterns/accordions/full-to-accordion.html
以下是我正在尝试做的事情的图片：http://imgur.com/a/c0Wtk
我用ACCORDION评论了CSS块和HTML部分，以便注意我正在尝试正确编码的位置。每当我点击我的框中的箭头时，它就像一个锚标签，并不会折叠容器，如图所示。无论如何在不使用Javascript或JQuery的情况下更正此代码？
html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
.msofix {mso-table-lspace: -1pt; mso-table-rspace:-1pt}
body{padding:0; margin:0;}
@media only screen and (max-width: 480px) {
div[class=divSecMobile]{
display: block !important;
max-height: none !important;
overflow: visible !important;
font-size: inherit !important;
line-height: 23px !important;
}
div[class=divSecDesktop]{
display:none !important;
}
.divSecDesktop {
display:none!important;
}
.divSecMobile {
display:block!important;
max-height:none!important;
overflow:visible!important;
font-size:inherit !important;
line-height:23px!important;
}
table[class=tblEmail] {
width: 100% !important;
}
table[class=tblContent] {
width: 100% !important;
}
/*Begin Accordion*/
table[class=pattern] .story td {
max-height: 0;
overflow: hidden;
margin: 0;
}
table[class=pattern] .story td a { display: block; position: relative; }
table[class=pattern] .story td a:after {
content: '+';
position: absolute;
top: 0;
right: 0;
display: block;
}
table[class=pattern] #story1:target td {
max-height: 999px;
margin: 16px 0;
-webkit-transition: max-height 0.5s ease-out;
-moz-transition: max-height 0.5s ease-out;
-ms-transition: max-height 0.5s ease-out;
-o-transition: max-height 0.5s ease-out;
transition: max-height 0.5s ease-out;
}
/*End of Accordion*/
td[class=tdPolicyAndDetails]{
border:2px solid #002663 !important;
}
}
.auto-style1 {
margin-bottom: 0px;
}<table width="600" bgcolor="#ffffff" class="tblEmail" cellpadding="0" cellspacing="0" align="center" style="mso-table-lspace: -1pt; mso-table-rspace: -1pt; border-collapse: collapse" >
<!--Begin Accordion -->
<tr>
<td style="border-right:2px solid #002663;border-left:2px solid #002663;border-top:2px solid #002663;">
<table cellpadding="0" cellspacing="0" width="100%" class="pattern">
<tr>
<td width="20%" bgcolor="002663" style="color:#ffffff;font-size:50px;text-align:center;" class="story">
<a href="#story1"><img src="http://image.email-libertymutual.com/lib/fecc16717d67067e/m/1/Icon_Chevron_Closed_3x.png" width="11" height="17" style="border: none;" /></a>
</td>
<td width="80%" style="padding:15px 15px 15px 10px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; text-align:center; font-size:14px; line-height:20px;color:#002663;text-align:left;white-space:nowrap;">
<b>Policy #:</b> <font color="#616265">A23-3434-43243-343</font>
</td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; text-align:center; font-size:14px; line-height:20px;color:#002663; text-align: left;white-space:nowrap;">
<b>Policy Period:</b> <font color="#616265">02/02/2014 - 02/03/2017</font>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="20%" style="color:#ffffff;text-align:center; padding:20px 0px 0px 20px;" align="right" valign="top">
<img src="http://image.email-libertymutual.com/lib/fecc16717d67067e/m/1/auto_icon_3x.png" width="29" height="21" style="border:none" />
</td>
<td width="80%" style="padding:15px 0px 15px 10px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; text-align:center; font-size:16px; line-height:20px;color:#002663;text-align:left;font-weight:bold;">
<!--%%[IF Policy1_LOB=="Auto" THEN]%%-->
Vehicles Insured:
<!--%%[ELSEIF Policy1_LOB=="Condo" OR Policy1_LOB=="Renters" or Policy1_LOB=="Home" THEN]%%-->
Home Insured:
<!--%%[ENDIF]%%-->
</td>
</tr>
<!--%%[IF Policy1_LOB=="Auto" THEN]%%-->
<tr>
<td class="tdVehicleInfo" colspan="2" style="padding:20px 0px 10px 0px;font-family: Arial, Helvetica, sans-serif; text-align:left; font-size:14px; line-height:18px; color:#002663;font-weight:bold;">
%%Policy1_Vehicle1%%
</td>
</tr>
<tr>
<td class="tdVehicleInfo" colspan="2" style="padding:0px 0px 10px 0px;font-family: Arial, Helvetica, sans-serif; text-align:left; font-size:14px; line-height:18px; color:#002663;font-weight:bold;">
%%Policy1_Vehicle2%%
</td>
</tr>
<tr>
<td class="tdVehicleInfo" colspan="2" style="padding:0px 0px 10px 0px;font-family: Arial, Helvetica, sans-serif; text-align:left;font-size:14px; line-height:18px; color:#002663;font-weight:bold;">
%%Policy1_Vehicle3%%
</td>
</tr>
<tr>
<td class="tdVehicleInfo" colspan="2" style="padding:0px 0px 10px 0px;font-family: Arial, Helvetica, sans-serif; text-align:left; font-size:14px; line-height:18px; color:#002663;font-weight:bold;">
%%Policy1_Vehicle4%%
</td>
</tr>
<tr>
<td class="tdVehicleInfo" colspan="2" style="padding:0px 0px 10px 0px;font-family: Arial, Helvetica, sans-serif; text-align:left; font-size:14px; line-height:18px; color:#002663;font-weight:bold;">
%%Policy1_Vehicle5%%
</td>
</tr>
<tr>
<td class="tdVehicleInfo" colspan="2" style="padding:0px 0px 10px 0px;font-family: Arial, Helvetica, sans-serif; text-align:left; font-size:14px; line-height:18px; color:#002663;font-weight:bold;">
%%Policy1_Vehicle6%%
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--%%[IF Policy1_State!="MA" OR Policy1_LOB!="Umbrella" OR Policy1_LOB!="Home" THEN]%%-->
<tr>
<td class="tdIDCards" width="100%" style="padding: 0px 30px 20px 20px; font-family: Arial, Helvetica, sans-serif; font-size:14px; line-height:14px; color:#616265;text-align:left;border-right:2px solid #002663;border-left:2px solid #002663;border-bottom:2px solid #002663;">
Your ID cards are available online and a paper copy is being mailed to you.
</td>
</tr>
<!--%%[ENDIF]%%-->
<!--End Accordion-->
</table><!--tblEmail-->
答案 0 :(得分：1)
查看您尝试使用的模板，您在表格单元格中缺少1个ID。让我解释一下这种可折叠行为是如何起作用的：
在CSS中，你有:target选择器，当元素是url的目标时应用它。因此，当您在页面中显示<h1 id="someId">并在浏览器中将#someId添加到网址时，您可以使用h1设置h1:target { color: red; }的样式。
这种技术在这种折叠中以极好的方式使用，会发生什么：
#story1 <td>有一个id="story1" <td>就会成为目标td:target用于显示隐藏的内容部分现在查看您的代码段;锚点的父节点缺少id，永远不会成为锚点的目标。