2021-08-10 layui折叠面板的使用

官方参考：

element模块元素操作文档 - Layui

面板 - 在线演示 - Layui

实现效果

 html  ：

//在折叠面板的父容器设置属性 lay-accordion 来开启手风琴，那么在进行折叠操作时，始终只会展现当前的面板
<div class="layui-collapse" lay-accordion>
        <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>
        </div>
    </div>

js:执行下元素刷新  

参考文章：

动态添加的面板不生效  

layui js动态添加的面板不能折叠

layui.use([...,'element',...], function () {
    layui.element.render('collapse');
});

注意点：

1）.html中的折叠面板的格式尽量不要打破

<div class="layui-collapse" lay-accordion>
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">标题<i class="layui-icon layui-colla-icon"></i></h2>
            <div>//这个位置的div会导致折叠面板失效
                <div class="layui-colla-content layui-show">
                    自定义：循环想要显示的内容
                </div>
            </div>
        </div>
    </div>

2）.解决折叠面板只响应一次的问题   layui.element.render('collapse');

其它样式可参考：layui动态生成的手风琴实现默认第一个展开+鼠标悬浮展开

折叠框背景颜色

/*layui折叠框*/
    .layui-colla-title{
        color: #666;
        background-color: #f9f9f9;
    }