Layui折叠面板不支持直接动态添加，需手动插入合法DOM结构并调用element.render('collapse')重新渲染；内容异步加载时应先占位再填充并初始化子组件；事件需委托绑定，新增项可设唯一data-id便于管理。
Layui 的折叠面板（layui-collapse）本身不提供类似 collapse.add() 的动态添加 API，但可以通过手动插入 DOM + 重新渲染的方式实现新增面板项，整个过程需确保结构合法、事件可绑定、样式正常生效。
1. 插入符合规范的 HTML 结构
每个折叠面板项必须是 <div class="layui-colla-item">，内部包含 <code><h2 class="layui-colla-title"></h2> 和 <div class="layui-colla-content">。不能只加标题或只加内容，否则渲染后无法交互。
<ul>
<li>使用 jQuery 或原生 JS 向 <code>.layui-collapse 容器末尾追加完整结构，例如：
新面板标题
这里是动态加载的内容
- 若内容需异步加载（如通过 AJAX 获取），建议先插入占位结构，待数据返回后再填充
.layui-colla-content内容，并调用layui.element.init()确保内部组件（如表单、日期选择器等）可用。
2. 必须调用 element.render() 或 element.init() 同步状态
仅插入 DOM 不会自动激活折叠行为——Layui 的 collapse 组件在初始化时已绑定事件和状态，新插入的项属于“未注册节点”。
- 推荐方式：插入完成后立即执行
layui.element().render('collapse')（Layui 2.8+）或layui.element.render('collapse')（旧版）； - 若面板内含表单、下拉框、开关等子组件，还需额外调用
layui.form().render()和layui.element().init()，确保子控件样式与功能就绪； - 避免在全局 document ready 中重复渲染，应在插入操作后紧跟着执行，防止被覆盖或失效。
3. 注意事件绑定与状态管理
新面板的展开/收起由 Layui 自动接管，但如果你在 .layui-colla-content 中放置了按钮、链接或自定义操作，这些元素的事件不会自动绑定。
- 使用事件委托方式绑定，例如：
$(document).on('click', '.my-delete-btn', handler)； - 不要依赖
element.on('collapse()')监听新项——它只响应初始化时已存在的项；如需监听所有项（含后续动态添加），可在每次插入后手动触发一次element.on('collapse(your-filter)')的回调逻辑，或统一用 CSS 类 + 数据属性做状态判断； - 若需默认展开新项，插入后可立即执行：
$('.layui-colla-item').last().find('.layui-colla-title').click()（模拟点击触发）。
4. 清理与去重（可选但实用）
频繁添加可能导致重复项或内存残留，尤其在搜索、筛选等交互场景中。
- 为每个动态面板添加唯一标识，比如
data-id="panel-1001"，便于后续查找、删除或更新； - 插入前检查是否已存在：
$('[data-id="panel-1001"]').length === 0； - 删除时用
$('.layui-colla-item[data-id="panel-1001"]').remove()，再执行一次layui.element().render('collapse')保持索引一致。
