html中为div添加展开与收起功能(div折叠)

1、添加样式

html 复制代码
<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为图标,可自行修改)

html 复制代码
@* 为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时,显示收起展开)

javascript 复制代码
    /** 添加展开或折叠按钮 */
    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);

相关推荐
dy17171 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918415 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂5 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技6 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip6 小时前
JavaScript二叉树相关概念
前端
rannn_1116 小时前
【Javaweb学习|实训总结|Week1】html基础,CSS(选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画),js(基本类型、运算符典例)
css·笔记·学习·html
一朵梨花压海棠go6 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x7 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java7 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)7 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5