Layui折叠面板标题可直接修改DOM，需精准定位（如加data-id）、确保DOM就绪后再操作，无需重渲染，支持HTML内容。
Layui折叠面板（layui-collapse）的标题文字是纯静态 DOM 内容，不依赖配置对象或内部缓存，修改它只需直接操作对应 .layui-colla-title 元素的文本内容，但要注意精准定位、时机和结构稳定性。
用 jQuery 或原生 JS 直接改指定面板标题
折叠面板的标题是 <h2 class="layui-colla-title">，每个面板独立存在。要改某一个，不能用全局选择器如 $(".layui-colla-title")，否则会批量误改。
- 推荐按顺序索引改（适合固定结构）：
$(".layui-collapse .layui-colla-item").eq(0).find(".layui-colla-title").text("新标题") - 更稳妥的方式是加自定义标识（如
data-id）：
初始化时写：<div class="layui-colla-item" data-id="user-info"><h2 class="layui-colla-title">原始标题</h2></div>
修改时：$('[data-id="user-info"] .layui-colla-title').text("用户信息详情") - 原生写法（无 jQuery）：
document.querySelector('[data-id="user-info"] .layui-colla-title').innerText = "用户信息详情"
确保 DOM 已就绪再操作
如果在 layui.use(['element'], callback) 回调里立即修改，有时会因渲染延迟导致找不到元素。建议：
- 在
element.init()后延后执行，例如：setTimeout(() => { /* 修改标题 */ }, 10) - 或监听折叠事件后修改（如展开时动态加载数据并更新标题）：
element.on('collapse(test)', function(data){ if(data.title === '加载中...') { $(data.elem).find('.layui-colla-title').text('已加载完成'); } });
改完后是否需要重渲染？
不需要调用 element.render('collapse') —— 折叠面板没有“标题缓存”机制，也不像 tab 或 table 那样维护内部配置映射。只改 DOM 文本即可生效，且不会因切换、展开/折叠而被重置。
但注意：若面板内容是通过 AJAX 动态插入的，且标题文本也来自接口，务必等内容追加完成后再改标题，避免 DOM 节点尚未挂载。
样式或图标变化可一并处理
标题支持 HTML，比如加图标或状态徽标：$('[data-id="order-list"] .layui-colla-title').html('<i class="layui-icon"></i> 订单列表 <span style="color:#FF5722;font-size:12px;">(共12条)</span>');
只要不破坏 <h2> 结构，Layui 不会干预渲染结果。
