html+css+js实现内容的收缩与展开
1、说明：设置指定⾼度，当内容超过事先设置的⾼度时，便会出现“查看更多”按钮，单击“查看更多”超出内容变回展开同时“查看更多”切换成“收起”按钮，单击“收起”，超出内容便会被收缩
2、实现效果图
3、html代码如下：
<!DOCTYPE html >
<html>
<head>
<script src="../js/jquery.min.js"></script>
</head>
<body>
<div class="ui-tab">
<!-- 具体消息内容 -->
</div>
</body>
</html>
4、js代码如下：
<script type="text/javascript">
var more = "查看更多"
var information_lenght = []
/
/前端获取后台数据并呈现⽅法
function information_display() {
var data = [
{ "content": "测试段落的展开与收起.落的展开与与收起试段落的开与收起试段落的展开与收起试段落的展开与开开与收起试段落的展开与开开与收起试段落的展开与    { "content": "的展开与收起.落的展开与与收起试段落的开与收起试段落的展开与收起试段落的展开与开与收起试段落的展开与收起试" },
{ "content": "的展开与收起.落的展开与与收起试段落的开与收起试段落的展开与收试段落的展开与收起试试段落的展开与收起试试段落的展开与收起试试段落的展开  ];
$(".ui-tab").empty()
information_lenght = []
$.each(data, function (index, n) {
var more_class = "more-text"
var infor_content = ateElement("p");
infor_content.className = "info-shrink-text";
infor_content.id = "info-manager-content" + index
if (data[index].content.length < 75) {
more_class = "color"
}
information_lenght[index] = data[index].content.length
infor_content.innerHTML = data[index].content;
$(".ui-tab").append(infor_content)
var infor_hr = "<td class=" + more_class + " onclick=\"more_text(this)\" mark=" + index + ">" + more + "</td>"
+ "<hr style=\"height:1px;border:none;border-top:1px solid #EEEEEE;\" />";
$(".ui-tab").append(infor_hr)
手机上可以打html与css的app
})
}
//初始化加载，分页⾸页数据，输⼊：每页多少条数据，当前页（默认为1）；输出：当前页数据和总页数
information_display()
}
//添加按钮“查看更多”的点击事件
function more_text(item) {
console.log("单击查看更多：")
if ($(item).text() == "查看更多") {
if (information_lenght[$(item).attr("mark")] > 75) {
$(item).text("收起");
$("#info-manager-content" + $(item).attr("mark")).css({ height: (information_lenght[$(item).attr("mark")] / 75) * 30 });
}
}
else {
$(item).text("查看更多");
$(".info-shrink-text").css({ height: "20px" });
}
}
</script>
5、css代码：
<style type="text/css">
.info-shrink-text {
height: 20px;
width: 1400px;
overflow: hidden;
}
.color {
color: white;
}
.more-text {
color: #00a5e0;
font-size: 14px;
line-height: 2em;
}
</style>
6、整体代码如下：
<!DOCTYPE html >
<html>
<head>
<title> 消息呈现 </title>
<link rel="icon" href="picture.ico" type="image/x-icon" />
<script src="../js/jquery.min.js"></script>
<style type="text/css">
.info-shrink-text {
height: 20px;
width: 1400px;
overflow: hidden;
}
.color {
color: white;
}
.more-text {
color: #00a5e0;
font-size: 14px;
line-height: 2em;
}
</style>
</head>
<body>
<div class="ui-tab">
<!-- 具体消息内容 -->
</div>
<script type="text/javascript">
var more = "查看更多"
var information_lenght = []
//前端获取后台数据并呈现⽅法
function information_display() {
var data = [
{ "content": "测试段落的展开与收起.落的展开与与收起试段落的开与收起试段落的展开与收起试段落的展开与开开与收起试段落的展开与开开与收起试段落的展开与    { "content": "的展开与收起.落的展开与与收起试段落的开与收起试段落的展开与收起试段落的展开与开与收起试段落的展开与收起试" },
{ "content": "的展开与收起.落的展开与与收起试段落的开与收起试段落的展开与收试段落的展开与收起试试段落的展开与收起试试段落的展开与收起试试段落的展开  ];
$(".ui-tab").empty()
information_lenght = []
$.each(data, function (index, n) {
var more_class = "more-text"
var infor_content = ateElement("p");
var infor_content = ateElement("p");
infor_content.className = "info-shrink-text";
infor_content.id = "info-manager-content" + index
if (data[index].content.length < 75) {
more_class = "color"
}
information_lenght[index] = data[index].content.length
infor_content.innerHTML = data[index].content;
$(".ui-tab").append(infor_content)
var infor_hr = "<td class=" + more_class + " onclick=\"more_text(this)\" mark=" + index + ">" + more + "</td>"
+ "<hr style=\"height:1px;border:none;border-top:1px solid #EEEEEE;\" />";
$(".ui-tab").append(infor_hr)
})
}
//初始化加载，分页⾸页数据，输⼊：每页多少条数据，当前页（默认为1）；输出：当前页数据和总页数
information_display()
}
//添加按钮“查看更多”的点击事件
function more_text(item) {
console.log("单击查看更多：")
if ($(item).text() == "查看更多") {
if (information_lenght[$(item).attr("mark")] > 75) {
$(item).text("收起");
$("#info-manager-content" + $(item).attr("mark")).css({ height: (information_lenght[$(item).attr("mark")] / 75) * 30 });    }
}
else {
$(item).text("查看更多");
$(".info-shrink-text").css({ height: "20px" });
}
}
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。