layui card组件本身不内置折叠功能，但可通过icon、click事件和DOM操作（如toggle）实现标题点击折叠/展开主体内容，支持多卡片独立控制及默认折叠状态。
layui 的 card 组件本身不内置折叠/展开功能，但可以通过结合 layui 的 icon、click 事件和简单的 DOM 操作（如 toggle()）轻松实现点击标题区域折叠/展开主体内容。
1. 基础结构：为 card 添加可点击区域和折叠标识
确保 card 结构中标题部分可响应点击，并添加一个图标用于视觉反馈（如 layui 内置的 layui-icon-triangle-d 向下，layui-icon-triangle-r 向右）：
<div class="layui-card">
<div class="layui-card-header" id="cardHeader">
用户信息
<i class="layui-icon layui-icon-triangle-d" id="toggleIcon"></i>
</div>
<div class="layui-card-body" id="cardBody">
<p>姓名：张三</p>
<p>邮箱：zhangsan@example.com</p>
</div>
</div>
2. 使用 layui.ready + jQuery 实现折叠逻辑
layui 2.8+ 默认支持 jQuery（若未引入需手动加载），利用 layui.jquery 或全局 $ 操作 DOM。在 layui.ready 中绑定点击事件：
layui.use(['jquery'], function(){
var $ = layui.jquery;
$('#cardHeader').on('click', function(){
var $body = $('#cardBody');
var $icon = $('#toggleIcon');
if($body.is(':visible')){
$body.slideUp(200);
$icon.removeClass('layui-icon-triangle-d').addClass('layui-icon-triangle-r');
} else {
$body.slideDown(200);
$icon.removeClass('layui-icon-triangle-r').addClass('layui-icon-triangle-d');
}
});
});
3. 可选增强：支持多卡片独立控制 + 默认折叠状态
若页面有多个 card，建议用 class 代替 ID，并通过父子关系定位对应 body 和 icon：
- 给每个 card 添加统一 class，如
card-collapsible - 标题用
.card-header-toggle，图标加.card-toggle-icon，主体用.card-body-fold - 初始化时可加
style="display:none"或 JS 控制默认折叠 - 点击时用
$(this).next('.card-body-fold')精准控制对应内容区
4. 注意事项与兼容性
layui 官方 card 不依赖动画库，slideUp/slideDown 来自 jQuery；若项目未引入 jQuery，可用原生 classList.toggle 配合 CSS 过渡（需额外写 height 动画或 max-height 技巧）。
移动端点击区域建议保持足够大小（最小 44px），避免误触。图标右侧留适当间距，可用 padding-left: 10px 或 margin-left 调整。
