点击展开卡片jq怎么做

您可以使用 jQuery 的 slideToggle() 方法来实现点击展开卡片的效果。具体代码如下：

HTML：

<div class="card">
  <div class="card-header">
    <h3>卡片标题</h3>
    <button class="toggle-btn">展开</button>
  </div>
  <div class="card-body">
    <p>卡片内容</p>
  </div>
</div>

CSS：

.card {
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f5f5f5;
}

.card-body {
  display: none;
  padding: 10px;
}

JavaScript：

$(document).ready(function() {
  $('.toggle-btn').click(function() {
    $(this).parent().next('.card-body').slideToggle();
    $(this).text(function(i, text) {
      return text === '展开' ? '收起' : '展开';
    });
  });
});

这段代码会在页面加载完成后，为每个卡片的展开按钮添加一个点击事件。当点击按钮时，它会找到它的父元素（即卡片头部），然后找到下一个元素（即卡片内容），并使用 slideToggle() 方法来切换它的显示状态。同时，按钮的文本也会随之改变。