layui折叠面板怎么在面板完全展开后触发回调函数-Layui教程-PHP中文网

layui折叠面板无原生“完全展开后触发回调”事件，需监听change事件结合transitionend或setTimeout判断高度变化完成展开。

layui折叠面板怎么在面板完全展开后触发回调函数

layui 的折叠面板（即 lay-collapse）本身不提供“完全展开后触发回调”的原生事件，但可以通过监听 change 事件 + DOM 状态判断来精准捕获「某一项完成展开」的时机。

监听 collapse 的 change 事件

layui 的折叠面板在展开/收起时会触发 change 事件，回调参数是当前被操作项的索引（从 0 开始）和对应面板的 DOM 元素。注意：该事件在动画开始前就已触发，不是动画结束时。

需配合 setTimeout 或 getComputedStyle 判断高度是否已稳定，才能确认“真正展开了”
若只关心「展开动作完成」，推荐监听 transitionend 事件，更准确

用 transitionend 捕获真实展开完成

layui 折叠面板内部使用 CSS 过渡控制高度变化（height: auto + transition: height .3s），因此可在面板内容区域监听 transitionend，并校验是否为高度变化：

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

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

下载

layui.use('element', function(){
  var element = layui.element;

  // 初始化折叠面板
  element.render('collapse');

  // 监听 change 获取目标项
  element.on('collapse(test)', function(data){
    var $panel = $(data.elem).next(); // 获取内容区 DOM（.layui-colla-content）
    var $content = $panel.find('.layui-colla-item'); // 或直接用 $panel[0]

    // 清除旧监听，避免重复绑定
    $content.off('transitionend').on('transitionend', function(e){
      if (e.propertyName === 'height') {
        console.log('面板已完全展开，执行回调');
        // ✅ 在这里写你的业务逻辑，比如加载数据、滚动定位、更新状态等
      }
    });
  });
});