首先展示一下失效的页面
解决的方法是：在模板渲染完毕之后，还需要在更新一下折叠面板
附上我的完整代码：
<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>
730
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
