layui 手风琴折叠

最新推荐文章于 2024-04-16 04:56:18 发布

原创最新推荐文章于 2024-04-16 04:56:18 发布 · 2.5k 阅读

4 ·

CC 4.0 BY-SA版权

layui 专栏收录该内容

46 篇文章

订阅专栏

效果图：

在这里插入图片描述

1，引入文件

注意：文件的位置不一样，引入的路径也不同


    <link rel="stylesheet" href="/static/layui/css/layui.css" />
    <script type="text/javascript" src="/static/layui/layui.js"></script>

2，编写div样式


<div style="width: 100%;  " id="divtitle" >
    <div class="layui-collapse" lay-filter="test">
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">系统公告<i class="layui-icon layui-colla-icon"></i></h2>
            <div class="layui-colla-content layui-show">
            // 数据表格
                <div class="fp-table" style="width: 100%;overflow: hidden" >
                    <table id="demo" lay-filter="test" ></table>
                </div>
            </div>
        </div>

    </div>
</div>

3，编写js代码监听

注意：一定要 element.init(); 初始化处理，不然折叠不起作用


    layui.use(['form', 'table','element', 'layer'], function () {
        var element = layui.element;
        var layer = layui.layer;
        //监听折叠
        element.init();
        element.on('collapse(test)', function(data){
            // layer.msg('展开状态：'+ data.show);
        });
    });