工作中经常会遇到有的页面内容很长，特别是新闻内容或活动详情等页面，为了良好的用户体验以及希望用户能看到详情页底部一些推荐、排行等内容，我们需要把详情内容做一些隐藏，当用户点击“展开全部”按钮的时候再显示所有详情内容。
下面这个方法只实现了展开功能，没有收起功能，收起功能后面再补充吧。
html
<div class="detail-wrapper">
<div class="activity-content" id="container">
<div class="content">
<p>本月初，将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而，当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候，百度已经开始享受人工智能带来的投资回报了。</p>
<p>本月初，将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而，当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候，百度已经开始享受人工智能带来的投资回报了。</p>
<p>本月初，将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而，当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候，百度已经开始享受人工智能带来的投资回报了。</p>
<p>本月初，将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而，当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候，百度已经开始享受人工智能带来的投资回报了。</p>
<p>本月初，将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而，当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候，百度已经开始享受人工智能带来的投资回报了。</p>
<img src="./img/activity-img2.png" alt="活动介绍图片">
<p>本月初，将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而，当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候，百度已经开始享受人工智能带来的投资回报了。</p>
<p>本月初，将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而，当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候，百度已经开始享受人工智能带来的投资回报了。</p>
<p>本月初，将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而，当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候，百度已经开始享受人工智能带来的投资回报了。</p>
<p>本月初，将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而，当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候，百度已经开始享受人工智能带来的投资回报了。</p>
<p>本月初，将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而，当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候，百度已经开始享受人工智能带来的投资回报了。</p>
<p>本月初，将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而，当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候，百度已经开始享受人工智能带来的投资回报了。</p>
<p>本月初，将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而，当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候，百度已经开始享受人工智能带来的投资回报了。</p>
<p>本月初，将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而，当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候，百度已经开始享受人工智能带来的投资回报了。</p>
<img src="./img/activity-img2.png" alt="活动介绍图片">
</div>
<div class="unfold-field">
<div class="unflod-field_mask"></div>
<div class="unfold-field_text"><a href="javascript:void (0);" class="see-more">展开更多详情<i><img
src="./img/red-right-arrow.png" alt="查看更多详情"></i></a></div>
</div>
</div>
<p class="text-center">下面是其他内容...</p>
<p class="text-center">下面是其他内容...</p>
<p class="text-center">下面是其他内容...</p>
</div>
css
#container {
max-height: 15.706666rem;
overflow: hidden;
position: relative;
visibility: hidden;
}
p {
margin: 0.3rem 0;
font-size: 16px;
line-height: 1.6;
color: #2B2B2B;
}
.content img {
margin: 0.3rem 0;
}
.detail-wrapper .unfold-field {
position: absolute;
font-size: 0;
bottom: -0.1rem;
width: 100%;
z-index: 3;
}
.detail-wrapper .unfold-field .unflod-field_mask {
height: 2rem;
width: 100%;
background: #fff;
}
.detail-wrapper .unfold-field .unfold-field_text {
position: absolute;
bottom: 0;
left: 0;
border-top: 1px solid #F4F4F4;
width: 100%;
height: 1.306666rem;
line-height: 1.306666rem;
}
.detail-wrapper .activity-content {
border-bottom: 1px solid #f4f4f4;
}
.detail-wrapper .activity-content img {
width: 100%;
}
.detail-wrapper .see-more {
display: block;
width: 100%;
height: 1.1466666667rem;
color: #f0737a;
font-size: 16px;
text-align: center;
cursor: pointer;
background: #fff;
}
.detail-wrapper .see-more i {
margin-left: 0.2rem;
font-style: normal;
}
.detail-wrapper .see-more i img {
margin-top: -1px;
width: 0.2rem;
height: 0.3466666667rem;
display: inline-block;
vertical-align: middle;
}
以上样式中，#container 和.unfold-field 以及其子元素内部分样式都非常重要，如果没有这些样式，那么下面的js代码是不生效的。
js
window.onload = function () {
var unfoldField = document.querySelector(".unfold-field");
var wrapH = document.querySelector("#container").offsetHeight;
var wrap = document.querySelector("#container");
var contentH = document.querySelector(".content").offsetHeight;
// 如果实际高度大于我们设置的默认高度就把超出的部分隐藏。
if (contentH > wrapH) {
unfoldField.style.display = "block";
}
wrap.style.visibility = "visible";
unfoldField.onclick = function () {
this.parentNode.removeChild(this);
wrap.style.maxHeight = "100%";
wrap.style.visible = "visible";
};
};
