首先，需要使用CSS的媒体查询来实现响应式布局。接着，可以使用CSS3的transition和transform属性来实现卡片的折叠和展开效果。
具体实现步骤如下：
<div class="card">
<div class="card-header">
<h2>Card Title</h2>
<button class="btn-toggle">Toggle</button>
</div>
<div class="card-content">
<p>Card content goes here...</p>
</div>
</div>.card {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
overflow: hidden;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #eee;
padding: 10px;
cursor: pointer;
}
.card-content {
padding: 10px;
}@media only screen and (max-width: 600px) {
.card {
border: none;
margin-bottom: 10px;
}
.card-header {
background-color: #fff;
border-bottom: 1px solid #ccc;
}
.card-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.card.active .card-content {
max-height: 1000px;
transition: max-height 0.5s ease-in;
}
}const btnToggle = document.querySelectorAll('.btn-toggle');
btnToggle.forEach(btn => {
btn.addEventListener('click', () => {
btn.parentElement.parentElement.classList.toggle('active');
});
});关键词：