直播平臺製作，文字過多時，自動摺疊顯示檢視更多選項

<!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;
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>就是看見了是非得失的就是看見了是非得失的就
<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>

以上就是直播平臺製作，文字過多時，自動摺疊顯示檢視更多選項，更多內容歡迎關注之後的文章

直播平臺製作，文字過多時，自動摺疊顯示檢視更多選項

相關文章