layui卡片card怎么实现点击折叠与展开卡片主体内容-Layui教程-PHP中文网

layui card组件本身不内置折叠功能，但可通过icon、click事件和dom操作（如toggle）实现标题点击折叠/展开主体内容，支持多卡片独立控制及默认折叠状态。

layui卡片card怎么实现点击折叠与展开卡片主体内容

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 class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/7535" title="深蓝色网站后台管理系统layui框架模板-AdminPro"><img
														src="https://img.php.cn/upload/webcode/000/287/557/6340dac18f876183.png" alt="深蓝色网站后台管理系统layui框架模板-AdminPro" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/code/7535" title="深蓝色网站后台管理系统layui框架模板-AdminPro" class="overflowclass">深蓝色网站后台管理系统layui框架模板-AdminPro</a>
													<p class="overflowclass">一款深蓝色网站后台管理系统layui框架模板</p>
												</div>
												<a rel="nofollow" href="/xiazai/code/7535" title="深蓝色网站后台管理系统layui框架模板-AdminPro" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
  </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');
    }
  });
});