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

最新推荐文章于 2022-01-07 10:59:47 发布

小黄鸭htt

最新推荐文章于 2022-01-07 10:59:47 发布

阅读量290

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_41141811/article/details/117982693

版权

<!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要在数据加载完成后执行

小黄鸭htt

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文字和图片过多时，使用收起展开查看更多

<!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>&lt...
复制链接

扫一扫