First show the failed page
The solution is: after the template is rendered, you need to update the folding panel
Attached is my complete code:
<body>
<div class="layui-collapse" lay-filter="test" lay-accordion></div>
<script src="./js/layui.js"></script>
<script id="template" type="text/html">
{
{# layui.each(d, function(index, item){ }}
<div class="layui-colla-item">
<h2 class="layui-colla-title">{
{item.title}}</h2>
<div class="layui-colla-content layui-show">{
{item.content}}</div>
</div>
{
{# }) }}
</script>
<script type="text/javascript">
layui.use(["element", "jquery",'laytpl'], function () {
let $ = layui.jquery;
var element = layui.element;
let laytpl=layui.laytpl
let data = [
{
title: "李清照",
content: "诗人李清照",
},
{
title: "李清照1",
content: "诗人李清照1",
},
{
title: "李清照2",
content: "诗人李清照2",
},
];
let getTpl=$('#template').html();
laytpl(getTpl).render(data,function(html){
$(".layui-collapse").html(html)
})
// 模板渲染完毕,在执行element.render()折叠面板就可以点击,小箭头也会展示出来
element.render()
});
</script>
</body>