CSS和JS实现内容折叠/展开效果

经常逛 CSDN 的朋友会发现如下效果：当代码行数超过指定高度的时候，会有折叠，点击展开按钮后才会展示全部。

这一效果在知乎、百度知道也很常见。

在这里插入图片描述

实现

直接上代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>折叠/展开</title>
	<style>
		.open-before{
			position: relative;
			height: 220px;
			overflow: hidden;
			color: #fff;
			background-image: linear-gradient(#333 80%, #eee);
		}
		.content{
			height: auto;
			overflow: auto;
			color: #fff;
			background-color: #333;
		}
		.hidden{
			display: none
		}
		.open-btn{
			position: absolute;
			top: 200px;
			text-align: center;
			width: 100%
		}
	</style>
	
	
	
</head>
<body>
	<div id="content" class="open-before">
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
		<p>我的第一个段落。</p>
		<p>我的第一个段落。</p>
		<p>我的第一个段落。</p>
		<p>我的第一个段落。</p>
	<p>888888888888888。</p>
		
		<div id="btn" class="open-btn">
			<button onclick="fun()">展开</button>
		</div>
		</div>
	
	<script>
		function fun(){
			document.getElementById('content').className = 'content'
			document.getElementById('btn').className= 'hidden'
		}
	</script>
</body>
</html>

效果图

展开前

在这里插入图片描述

展开后

在这里插入图片描述

问题

虽然上述代码初步实现了折叠和展开的需求，但是还有一种情况没判断到。

就是如果内容比较少，用不了初始化的折叠高度怎么办？

那就不需要折叠了，并且需要计算内容高度。

加入 js 判断逻辑，计算内容高度实际高度。

let height = document.getElementById('content').clientHeight;
		if(height >= 220){
			document.getElementById('content').className = 'open-before'
			document.getElementById('btn').className= 'open-btn'
		}else{
			fun();
		}

同时内容的 className 设置为 ‘content’

<div id="content" class="content">

原文链接：https://blog.csdn.net/weixin_43930421/article/details/126461641