启用Layui手风琴模式只需在容器添加lay-accordion属性，确保结构为layui-collapse→layui-colla-item→layui-colla-title+layui-colla-content，动态内容需调用layui.element.render('collapse')刷新，change事件仅在切换不同项时触发。

这其实只需要在初始化折叠面板时开启手风琴模式（accordion），Layui 就会自动处理“展开一个、收起其余”的逻辑，无需额外写 JS。

启用手风琴模式

在包裹折叠面板的容器上添加 lay-accordion 属性即可：

<div class="layui-collapse" lay-accordion>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">标题 1</h2>
    <div class="layui-colla-content">内容 1</div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">标题 2</h2>
    <div class="layui-colla-content">内容 2</div>
  </div>
</div>

确保结构和渲染正确

手风琴模式生效的前提是：

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

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

下载

• HTML 结构必须严格符合 layui-collapse → layui-colla-item → layui-colla-title + layui-colla-content 的嵌套关系
• 不要在 .layui-colla-item 内部多加一层无关的 <div>，否则会破坏事件绑定
• 若面板是动态生成的（如 AJAX 加载后插入），需手动调用刷新：
  layui.element.render('collapse');

注意 change 回调的触发时机

开启 lay-accordion 后，可监听 change 事件获取当前激活项索引：

layui.use('element', function(){
  var element = layui.element;
  element.on('collapse(testFilter)', function(data){
    console.log('当前展开项索引：', data.index); // 点击同一项收起时，该回调不触发
  });
});

⚠️ 注意：这个回调只在「切换到不同项」时触发；如果用户点击已展开的标题来收起它，change 不会执行。