layui折叠面板怎么获取当前所有处于展开状态的面板ID-Layui教程-PHP中文网

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

layui折叠面板怎么获取当前所有处于展开状态的面板id

Layui 折叠面板（ 添加 id 属性，例如：


  ID 建议语义化、可解析，如 user-info、order-setting，避免纯数字或重复值
  不要依赖 data-index 或 lay-id —— 折叠面板没有这些属性，它们属于 Tab 或其他组件


通过 DOM 查询获取当前展开项的 ID 列表
利用 .layui-colla-content:visible 的可见性判断最稳定（比查 class 更可靠）：

											
												
												
													深蓝色网站后台管理系统layui框架模板-AdminPro
													一款深蓝色网站后台管理系统layui框架模板
												
												下载
												
											
										

使用 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，可维护一个全局数组，在用户点击时更新：

初始化：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 回调来同步——它只在手风琴切换时触发，且不区分展开/收起，也不适用于非手风琴模式