Layui动态渲染手风琴面板时默认展开问题的解决方案

问题背景

在使用Layui框架开发Web应用时，开发者经常需要动态渲染手风琴（Collapse）组件。手风琴组件的一个常见特性是默认只展开一个面板，其他面板保持折叠状态。然而，当使用laytpl模板引擎动态渲染手风琴面板时，可能会遇到所有面板默认全部展开的问题。

问题复现

通过分析问题代码，我们可以看到以下关键点：

1. 使用了laytpl模板引擎动态生成手风琴面板内容
2. 模板中为每个面板的内容区域添加了layui-show类
3. 渲染完成后调用了element.render方法重新渲染组件

问题原因

问题的根源在于模板中为每个面板的layui-colla-content都添加了layui-show类。这个类会强制面板内容区域显示，导致所有面板默认展开，违背了手风琴组件"每次只展开一个面板"的设计初衷。

解决方案

解决这个问题的方法非常简单：

1. 从模板中移除layui-show类
2. 让Layui的手风琴组件自行管理面板的展开/折叠状态

修改后的模板代码如下：

<script id="domain-list" type="text/html">
{{#  layui.each(d, function(index, item){ }}
<div class="layui-colla-item">
    <div class="layui-colla-title">{{= item.title}}</div>
    <div class="layui-colla-content">{{= item.desc}}</div>
</div>
{{#  }); }}
</script>

技术原理

Layui的手风琴组件在初始化时会自动处理面板的展开状态：

1. 当lay-accordion属性存在时，组件会确保同一时间只有一个面板处于展开状态
2. 如果没有指定初始展开的面板，默认会展开第一个面板
3. 手动添加layui-show类会覆盖组件的默认行为

最佳实践

在使用Layui动态渲染手风琴组件时，建议遵循以下实践：

1. 让组件自行管理展开状态，避免手动添加layui-show类
2. 如果需要指定初始展开的面板，可以通过lay-accordion属性配合layui-colla-item的lay-unselect属性实现
3. 动态渲染完成后，确保调用element.render方法重新渲染组件

总结

Layui框架提供了强大的动态渲染能力，但在使用时需要注意框架组件的设计原则。通过理解组件的工作原理，我们可以避免类似的面板默认展开问题，确保应用按照预期运行。这个案例也提醒我们，在使用UI框架时，应该尽量遵循框架的约定，而不是手动覆盖框架的默认行为。