【iCSS：行为】使用max-height切换自动高度

icss-max-height.markdown

【iCSS：行为】使用max-height切换自动高度

A Pen by JowayYoung on CodePen.

License.

index.html

<div class="bruce flex-ct-x">
	<ul class="auto-height">
		<li>
			<h3>列表1</h3>
			<p>内容1<br>内容2<br>内容3<br>内容4</p>
		</li>
		<li>
			<h3>列表2</h3>
			<p>内容1<br>内容2<br>内容3<br>内容4</p>
		</li>
		<li>
			<h3>列表3</h3>
			<p>内容1<br>内容2<br>内容3<br>内容4</p>
		</li>
	</ul>
</div>

style.scss

.auto-height {
	width: 300px;
	li {
		margin-top: 5px;
		cursor: pointer;
		&:first-child {
			margin-top: 0;
		}
		&:hover p {
			border-bottom-width: 1px;
			max-height: 600px;
		}
	}
	h3 {
		padding: 0 20px;
		height: 40px;
		background-color: #f66;
		cursor: pointer;
		line-height: 40px;
		font-size: 16px;
		color: #fff;
	}
	p {
		overflow: hidden;
		padding: 0 20px;
		border: 1px solid #f66;
		border-top: none;
		border-bottom-width: 0;
		max-height: 0;
		line-height: 30px;
		transition: all 500ms;
	}
}

styles

<link href="https://yangzw.vip/static/css/reset.css" rel="stylesheet" />
<link href="https://yangzw.vip/static/css/main.css" rel="stylesheet" />
<link href="https://yangzw.vip/static/css/theme.scss" rel="stylesheet" />