1、添加样式

<style type="text/css">.mask {position: absolute;bottom: -5px;color: #4b83f0;font-weight: 700;font-size: 14px;text-align: center;height: 80px;left: 0;right: 0;background-image: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, 0)), to(#fff));background-image: linear-gradient(hsla(0, 0%, 100%, 0), #fff);}.mask.expand {background-image: none;}.mask span {position: absolute;bottom: 5px;left: 50%;margin-left: -25px;cursor: pointer;}.mask-fold {height: 300px;}</style>

2、添加展开收起按钮div (i为图标，可自行修改)

@* 为div添加maskDiv *@
<template id="template_div-mask"><div class="mask"><span><i class="layui-icon layui-icon-down layui-font-12"></i> 展开</span></div>
</template><template id="template_div-mask2"><div class="mask expand"><span><i class="layui-icon layui-icon-up layui-font-12"></i> 收起</span></div>
</template>

3、添加js代码响应逻辑（此处设置div高度超过300px时，显示收起展开）

/** 添加展开或折叠按钮 */function AppendMask() {// 为content-image自动判定，并添加mask$.each($(".content-image"), function (index, contentImage) {appendMaskItem(index, contentImage);});}/** 为contentImage添加mask的展开或折叠按钮 */function appendMaskItem(index, contentImage) {var newMakItem = $("#template_div-mask").html();var divHeight = contentImage.getClientRects()[0].height;if (divHeight > 300) {//debugger;$(contentImage.parentNode).append(newMakItem);$(contentImage).addClass("mask-fold");}}/** 点击mask的展开或折叠按钮 */$(document).on("click", ".mask>span", function () {//debugger;var maskDiv = $(this).parents(".mask");var isExpand = $(maskDiv).hasClass("expand");var newMakItem = $(isExpand ? "#template_div-mask" : "#template_div-mask2").html();var parentDiv = maskDiv[0].parentNode;$(parentDiv).append(newMakItem);$(maskDiv[0]).remove();var firstDiv = parentDiv.children[0];if (isExpand) {$(firstDiv).addClass("mask-fold");}else {$(firstDiv).removeClass("mask-fold");}});

4、在界面中的div元素显示完成后调用：

setTimeout(AppendMask, 5000);