!DOCTYPE htmlhtmlhead title折叠文本title style 定义折叠面板样式 details margin 10px 0; padding 5px; border 1px solid #ccc; border-radius 5px; overflow hidden; 定义标题样式 summary font-weight bold; cursor

日期: 2028-10-05

标签: 教育

<!DOCTYPE html>
<html>
<head>
	<title>嵌套折叠文本</title>
	<style>
	/* 定义折叠面板样式 */
	details {
		margin: 10px 0;
		padding: 5px;
		border: 1px solid #ccc;
		border-radius: 5px;
		overflow: hidden;
	}
<pre><code>/* 定义标题样式 */
summary {
	font-weight: bold;
	cursor: pointer;
}

/* 定义展开和折叠状态的样式 */
details[open] &gt; *:not(summary) {
	animation: slideIn 0.3s ease forwards;
}

details:not([open]) &gt; *:not(summary) {
	animation: slideOut 0.3s ease forwards;
}

/* 定义展开和折叠动画 */
@keyframes slideIn {
	from {
		margin-top: -600px;
	}
	to {
		margin-top: 0;
	}
}

@keyframes slideOut {
	from {
		margin-top: 0;
	}
	to {
		margin-top: -600px;
	}
}
&lt;/style&gt;
</code></pre>
</head>
<body>
	<!-- 创建嵌套折叠文本 -->
	<details>
	  <summary>点击此处折叠/展开文本</summary>
	  <p>这里是需要折叠的文本内容。</p>
	  <details>
	    <summary>点击此处折叠/展开更多文本</summary>
	    <p>这里是更多需要折叠的文本内容。</p>
	  </details>
	</details>
</body>
</html

!DOCTYPE htmlhtmlhead title折叠文本title style 定义折叠面板样式 details margin 10px 0; padding 5px; border 1px solid #ccc; border-radius 5px; overflow hidden; 定义标题样式 summary font-weight bold; cursor

原文地址: https://www.cveoy.top/t/topic/fiue 著作权归作者所有。请勿转载和采集!