html - 如何正确使用 CSS 动画延迟来创建可折叠的 HTML 容器？

Question

我正在尝试使用响应式 CSS 动画延迟，以便在用户单击连接到表格的箭头时发生 Accordion 类型的 Action ，而没有 Javascript 而只有 HTML/CSS。

当您将屏幕调整为移动设备时看到这里:https://web.archive.org/web/20190523104045/http://responsiveemailpatterns.com/patterns/accordions/full-to-accordion.html

这是我正在尝试做的事情的图片:https://imgur.com/a/c0Wtk

我用 ACCORDION 注释了 CSS block 和 HTML 部分，以注意我尝试正确编码的位置。每当我单击我的框的箭头时，它就像一个 anchor 标记，并且不会如图所示折叠容器。有没有办法在不使用 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-->

Answer 1

查看您尝试使用的模板，您在表格单元格中缺少 1 个 ID。让我解释一下这种可折叠行为是如何工作的:

在 CSS 中你有 :target当元素是 url 的目标时应用的选择器。所以当你有一个 <h1 id="someId">在页面中添加 #someId到浏览器中的 url，您可以设置 h1 的样式与 h1:target { color: red; } .

此技术以巧妙的方式用于此可折叠，会发生什么:

• anchor 标记的 href 为:#story1
• 家长<td> anchor 的有一个 id="story1"
• 一旦您单击/点按加号(在 anchor 中)，<td>成为目标
• td:target用于显示被隐藏的部分内容

现在查看您的代码片段； anchor 的父级缺少 id，永远不会成为 anchor 的目标。