layui 的卡片面板（layui-card）不支持手风琴折叠功能，仅 layui-collapse 组件支持 accordion 模式及 change 事件监听；如需卡片手风琴效果，须用 js 手动控制显隐与互斥状态。
Layui 的卡片面板（layui-card）本身不提供手风琴折叠功能，也不支持像 layui-collapse 那样的 accordion 模式或内置展开/收起事件监听。你提到的“卡片面板的手风琴折叠事件”，实际是概念混淆——Layui 中：
- ✅
layui-collapse支持手风琴模式（accordion: true），且可通过change回调监听「当前激活项切换」； - ❌
layui-card是静态容器组件，无折叠逻辑，更无accordion属性或折叠事件。
所以，如果你想要的是「点击某个卡片标题时，展开它、同时收起其他已展开的卡片」，这属于自定义手风琴交互，需手动实现，不能依赖 element 模块原生能力。
H3 手风琴效果只能靠自定义 JS 实现
卡片没有内置折叠机制，必须用 jQuery 或原生 JS 控制显隐，并管理互斥状态：
- 给每张卡片的标题加统一 class（如
.card-title）； - 给对应内容区加 class（如
.card-body），初始设display: none； - 点击标题时：
- 收起所有
.card-body； - 展开当前标题下的
.card-body。
- 收起所有
示例代码（jQuery）：
$('.card-title').on('click', function() {
const $body = $(this).next('.card-body');
// 先收起全部
$('.card-body').stop().slideUp(200);
// 再展开当前（避免重复点击无响应）
if (!$body.is(':visible')) {
$body.stop().slideDown(200);
}
});
⚠️ 注意：
.card-body需确保是.card-title的直接兄弟元素，且卡片结构语义清晰，否则next()可能选错。
H3 如果你其实想用的是折叠面板（collapse）
很多用户误把 layui-collapse 叫成“卡片面板”，但它才是 Layui 中唯一支持手风琴的折叠组件：
<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.use('element', function(){
var element = layui.element;
// 手风琴模式下，change 回调只在「切换到不同项」时触发
element.on('collapse(test)', function(data){
console.log('当前激活索引：', data.index); // 从 0 开始
});
});
⚠️ 关键限制：
-
change不触发于「同一项点两次收起」； - 非手风琴模式（
lay-accordion未设）下change完全无效； - 它不区分「展开」还是「收起」，只告诉你哪个索引被激活了。
H3 真正需要监听「展开/收起动作」？得用 click + 状态判断
如果非要精确知道某一项是刚展开还是刚收起（比如做统计、动画联动），只能放弃 change，改用原生 click 监听标题，并检查内容区可见性：
$('.layui-colla-title').on('click', function() {
const $content = $(this).next('.layui-colla-content');
setTimeout(() => {
if ($content.is(':visible')) {
console.log('该项已展开');
} else {
console.log('该项即将展开（当前是收起态）');
}
}, 0);
});
使用 setTimeout(..., 0) 是因为 Layui 的 DOM 更新是异步的，直接查 :visible 可能拿不到最新状态。
不复杂但容易忽略。
