直播平台制作，文字过多时，自动折叠显示查看更多选项
直播平台制作，文字过多时，自动折叠显示查看更多选项
<!DOCTYPE html>
<html>
<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;
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>就是看见了是非得失的就是看见了是非得失的就
<input type="hidden" name="" id="" value="A" />
<span>...展开</span>
</li>
<li>
就是看见了是非得失的就是看见了是非得失的就是看见了是非得失的就
<img src="images/288CE32AB5B012F9D49D46C5664AE3E4.jpg" >
<input type="hidden" name="" id="" value="A" />
<span>...展开</span>
</li>
<li>就是看见了是非得失的就是看见了是非得失的就是看见了是非得失的就
就是看见了是非得失的就是看见了是非得失的就是看见了是非得失的
就是看见了是非得失的就是看见了是非得失的就是看见了是非得失的
就是看见了是非得失的就是看见了是非得失的就是看见了是非得失的
是看见了是非得失的就是看见了是非得失的就是看见了是非得失的
<input type="hidden" name="" id="" value="A" />
<span>展开</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>
以上就是直播平台制作，文字过多时，自动折叠显示查看更多选项， 更多内容欢迎关注之后的文章
浙公网安备 33010602011771号