文字和图片过多时，使用收起展开查看更多

最新推荐文章于 2024-11-14 11:35:41 发布

原创最新推荐文章于 2024-11-14 11:35:41 发布 · 376 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了一种使用HTML和JavaScript实现的内容高度限制及展开收起效果的方法。通过CSS样式控制元素的高度，并利用JavaScript来切换显示状态，使得过长的内容能够被折叠起来，用户可以通过点击“展开”或“收起”按钮来查看完整内容。

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<script type="text/javascript" src="echart/js/jquery-1.11.2.js"></script>
	<style type="text/css">
		.aa{
			height: 40px;
			overflow: hidden;
			position: relative;
		}
		.aa span{
			display: none;
			position: absolute;
			right: 0;
			bottom: 0;
			z-index: 2;
			color: blueviolet;
			background-color: #FFFFFF;
			cursor: pointer;
		}
		.aa.zk::after{
			display: block;
			position: absolute;
			right: 0;
			bottom: 0;
			content: '...展开';
			color: red;
			background-color: #FFFFFF;
		}
		.aa.sq::before{
			display: block;
			position: absolute;
			right: 0;
			bottom: 0;
			content: '收起';
			color: red;
			background-color: #FFFFFF;
		}
		img{
			display: block;
			height: 500px;
		}
	</style>
</head>
<body>
	<ul>
		<li class="aa">就是看见了是非得失的就是看见了是非得失的就
			<input type="hidden" name="" id="" value="A" />
			<span class="sprake">...展开</span>
		</li>
		<li class="aa">
			就是看见了是非得失的就是看见了是非得失的就是看见了是非得失的就
			<img src="images/288CE32AB5B012F9D49D46C5664AE3E4.jpg" >
			<input type="hidden" name="" id="" value="A" />
			<span class="sprake">...展开</span>
		</li>
		<li class="aa">就是看见了是非得失的就是看见了是非得失的就是看见了是非得失的就
		就是看见了是非得失的就是看见了是非得失的就是看见了是非得失的
		就是看见了是非得失的就是看见了是非得失的就是看见了是非得失的
		就是看见了是非得失的就是看见了是非得失的就是看见了是非得失的
		是看见了是非得失的就是看见了是非得失的就是看见了是非得失的
		<input type="hidden" name="" id="" value="A" />
		<span class="sprake">展开</span>
		</li>
	</ul>
	<script type="text/javascript">
		
		var list = $(".aa");
		for(var i =0;i<list.length;i++){
			if(list[i].scrollHeight > 40){
				console.log(list[i].lastElementChild);
				list[i].lastElementChild.style.display="block";
			}
		}
		
		$(document).on('click',".sprake",function(){
			var hideval = $(this).siblings("input[type='hidden']").val();
			if(hideval == 'A'){
				$(this).parent().css({"overflow":"auto","height":"auto"});
				$(this).siblings("input[type='hidden']").val("B");
				$(this).html("收起");
			}else{
				$(this).parent().css({"overflow":"hidden","height":"40px"});
				$(this).siblings("input[type='hidden']").val("A");
				$(this).html("展开");
			}
		})
		
	</script>
</body>
</html>

注意：该段js要在数据加载完成后执行