工作中經(jīng)常會(huì)遇到有的頁面內(nèi)容很長(zhǎng)，特別是新聞內(nèi)容或活動(dòng)詳情等頁面，為了良好的用戶體驗(yàn)以及希望用戶能看到詳情頁底部一些推薦、排行等內(nèi)容，我們需要把詳情內(nèi)容做一些隱藏，當(dāng)用戶點(diǎn)擊“展開全部”按鈕的時(shí)候再顯示所有詳情內(nèi)容。
下面這個(gè)方法只實(shí)現(xiàn)了展開功能，沒有收起功能，收起功能后面再補(bǔ)充吧。
html
<div class="detail-wrapper">
<div class="activity-content" id="container">
<div class="content">
<p>本月初，將自家無人駕駛汽車“開”上北京五環(huán)的李彥宏受到了媒體群嘲。然而，當(dāng)媒體還在津津樂道“看互聯(lián)網(wǎng)大佬如何違規(guī)駕駛吃罰單”的時(shí)候，百度已經(jīng)開始享受人工智能帶來的投資回報(bào)了。</p>
<p>本月初，將自家無人駕駛汽車“開”上北京五環(huán)的李彥宏受到了媒體群嘲。然而，當(dāng)媒體還在津津樂道“看互聯(lián)網(wǎng)大佬如何違規(guī)駕駛吃罰單”的時(shí)候，百度已經(jīng)開始享受人工智能帶來的投資回報(bào)了。</p>
<p>本月初，將自家無人駕駛汽車“開”上北京五環(huán)的李彥宏受到了媒體群嘲。然而，當(dāng)媒體還在津津樂道“看互聯(lián)網(wǎng)大佬如何違規(guī)駕駛吃罰單”的時(shí)候，百度已經(jīng)開始享受人工智能帶來的投資回報(bào)了。</p>
<p>本月初，將自家無人駕駛汽車“開”上北京五環(huán)的李彥宏受到了媒體群嘲。然而，當(dāng)媒體還在津津樂道“看互聯(lián)網(wǎng)大佬如何違規(guī)駕駛吃罰單”的時(shí)候，百度已經(jīng)開始享受人工智能帶來的投資回報(bào)了。</p>
<p>本月初，將自家無人駕駛汽車“開”上北京五環(huán)的李彥宏受到了媒體群嘲。然而，當(dāng)媒體還在津津樂道“看互聯(lián)網(wǎng)大佬如何違規(guī)駕駛吃罰單”的時(shí)候，百度已經(jīng)開始享受人工智能帶來的投資回報(bào)了。</p>
<img src="./img/activity-img2.png" alt="活動(dòng)介紹圖片">
<p>本月初，將自家無人駕駛汽車“開”上北京五環(huán)的李彥宏受到了媒體群嘲。然而，當(dāng)媒體還在津津樂道“看互聯(lián)網(wǎng)大佬如何違規(guī)駕駛吃罰單”的時(shí)候，百度已經(jīng)開始享受人工智能帶來的投資回報(bào)了。</p>
<p>本月初，將自家無人駕駛汽車“開”上北京五環(huán)的李彥宏受到了媒體群嘲。然而，當(dāng)媒體還在津津樂道“看互聯(lián)網(wǎng)大佬如何違規(guī)駕駛吃罰單”的時(shí)候，百度已經(jīng)開始享受人工智能帶來的投資回報(bào)了。</p>
<p>本月初，將自家無人駕駛汽車“開”上北京五環(huán)的李彥宏受到了媒體群嘲。然而，當(dāng)媒體還在津津樂道“看互聯(lián)網(wǎng)大佬如何違規(guī)駕駛吃罰單”的時(shí)候，百度已經(jīng)開始享受人工智能帶來的投資回報(bào)了。</p>
<p>本月初，將自家無人駕駛汽車“開”上北京五環(huán)的李彥宏受到了媒體群嘲。然而，當(dāng)媒體還在津津樂道“看互聯(lián)網(wǎng)大佬如何違規(guī)駕駛吃罰單”的時(shí)候，百度已經(jīng)開始享受人工智能帶來的投資回報(bào)了。</p>
<p>本月初，將自家無人駕駛汽車“開”上北京五環(huán)的李彥宏受到了媒體群嘲。然而，當(dāng)媒體還在津津樂道“看互聯(lián)網(wǎng)大佬如何違規(guī)駕駛吃罰單”的時(shí)候，百度已經(jīng)開始享受人工智能帶來的投資回報(bào)了。</p>
<p>本月初，將自家無人駕駛汽車“開”上北京五環(huán)的李彥宏受到了媒體群嘲。然而，當(dāng)媒體還在津津樂道“看互聯(lián)網(wǎng)大佬如何違規(guī)駕駛吃罰單”的時(shí)候，百度已經(jīng)開始享受人工智能帶來的投資回報(bào)了。</p>
<p>本月初，將自家無人駕駛汽車“開”上北京五環(huán)的李彥宏受到了媒體群嘲。然而，當(dāng)媒體還在津津樂道“看互聯(lián)網(wǎng)大佬如何違規(guī)駕駛吃罰單”的時(shí)候，百度已經(jīng)開始享受人工智能帶來的投資回報(bào)了。</p>
<p>本月初，將自家無人駕駛汽車“開”上北京五環(huán)的李彥宏受到了媒體群嘲。然而，當(dāng)媒體還在津津樂道“看互聯(lián)網(wǎng)大佬如何違規(guī)駕駛吃罰單”的時(shí)候，百度已經(jīng)開始享受人工智能帶來的投資回報(bào)了。</p>
<img src="./img/activity-img2.png" alt="活動(dòng)介紹圖片">
</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">下面是其他內(nèi)容...</p>
<p class="text-center">下面是其他內(nèi)容...</p>
<p class="text-center">下面是其他內(nèi)容...</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 以及其子元素內(nèi)部分樣式都非常重要，如果沒有這些樣式，那么下面的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;
// 如果實(shí)際高度大于我們?cè)O(shè)置的默認(rèn)高度就把超出的部分隱藏。
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";
};
};
