js实现内容很长的页面中点击展开全部功能

工作中经常会遇到有的页面内容很长，特别是新闻内容或活动详情等页面，为了良好的用户体验以及希望用户能看到详情页底部一些推荐、排行等内容，我们需要把详情内容做一些隐藏，当用户点击“展开全部”按钮的时候再显示所有详情内容。
下面这个方法只实现了展开功能，没有收起功能，收起功能后面再补充吧。

html

    

        

            
本月初，将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而，当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候，百度已经开始享受人工智能带来的投资回报了。
            
本月初，将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而，当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候，百度已经开始享受人工智能带来的投资回报了。
            
本月初，将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而，当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候，百度已经开始享受人工智能带来的投资回报了。
            
本月初，将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而，当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候，百度已经开始享受人工智能带来的投资回报了。
            
本月初，将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而，当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候，百度已经开始享受人工智能带来的投资回报了。
            
            
本月初，将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而，当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候，百度已经开始享受人工智能带来的投资回报了。
            
本月初，将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而，当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候，百度已经开始享受人工智能带来的投资回报了。
            
本月初，将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而，当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候，百度已经开始享受人工智能带来的投资回报了。
            
本月初，将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而，当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候，百度已经开始享受人工智能带来的投资回报了。
            
本月初，将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而，当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候，百度已经开始享受人工智能带来的投资回报了。
            
本月初，将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而，当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候，百度已经开始享受人工智能带来的投资回报了。
            
本月初，将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而，当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候，百度已经开始享受人工智能带来的投资回报了。
            
本月初，将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而，当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候，百度已经开始享受人工智能带来的投资回报了。
            
        
        

            

            
展开更多详情
        
    
    
下面是其他内容...
    
下面是其他内容...
    
下面是其他内容...

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";
    };
};