Layui折叠面板可通过DOM查询或事件委托动态维护展开ID数组，推荐后者；手风琴模式下需清空前数组再添加新ID，避免依赖change回调。

Layui 折叠面板（）本身不提供直接获取所有展开项 ID 的 API，也没有内置的 <code>getExpandedIds() 方法。ID 需要开发者在 HTML 中显式设置，并通过 DOM 状态和结构手动提取。

确保每个面板有唯一且可识别的 ID

这是前提。Layui 不自动分配 ID，必须由你定义：

• 给每个 添加 <code>id 属性，例如：<div class="layui-colla-item" id="panel-1"> <li>ID 建议语义化、可解析，如 <code>user-info、order-setting，避免纯数字或重复值
• 不要依赖 data-index 或 lay-id —— 折叠面板没有这些属性，它们属于 Tab 或其他组件

通过 DOM 查询获取当前展开项的 ID 列表

利用 .layui-colla-content:visible 的可见性判断最稳定（比查 class 更可靠）：

• 使用 jQuery（Layui 默认兼容）：
  $('.layui-colla-item .layui-colla-content:visible').closest('.layui-colla-item').map(function() { return this.id; }).get();
• 若用原生 JS：
  Array.from(document.querySelectorAll('.layui-colla-content')).filter(el => getComputedStyle(el).height !== '0px').map(el => el.closest('.layui-colla-item')?.id).filter(id => id);
• 结果是字符串数组，如 ['panel-1', 'panel-3', 'config-advanced']

监听点击并动态维护展开 ID 状态（推荐用于交互频繁场景）

如果需要实时响应、避免重复查询 DOM，可维护一个全局数组，在用户点击时更新：


深蓝色网站后台管理系统layui框架模板-AdminPro
一款深蓝色网站后台管理系统layui框架模板
下载
• 初始化：const expandedPanelIds = [];
• 绑定事件委托（更安全，适配动态添加的面板）：
  

  $(document).on('click', '.layui-colla-title', function() {<br>  const $item = $(this).closest('.layui-colla-item');<br>  const id = $item.attr('id');<br>  if (!id) return;<br>  const $content = $(this).next('.layui-colla-content');<br>  setTimeout(() => {<br>    if ($content.is(':visible')) {<br>      if (!expandedPanelIds.includes(id)) expandedPanelIds.push(id);<br>    } else {<br>      const i = expandedPanelIds.indexOf(id);<br>      if (i > -1) expandedPanelIds.splice(i, 1);<br>    }<br>  }, 0);<br>});

• 后续可随时读取 expandedPanelIds 获取最新状态

注意 accordion 模式下的特殊逻辑

当启用手风琴模式（accordion: true）时，每次点击只会有一个面板展开：

• 上述 DOM 查询方式仍有效，结果数组长度最多为 1
• 手动维护数组时，新展开前可清空旧 ID：expandedPanelIds.length = 0;，再 push 新 ID
• 不要依赖 change 回调来同步——它只在手风琴切换时触发，且不区分展开/收起，也不适用于非手风琴模式