html折叠卡片怎么做的

HTML折叠卡片怎么做

在网页设计中，折叠卡片是一种常见的布局方式，它可以有效地展示信息，同时保持页面的整洁，本文将介绍如何使用HTML和CSS实现折叠卡片效果。

1、HTML结构

折叠卡片的基本结构包括一个容器(container)和若干个子元素(item)，容器用于包含所有子元素，子元素则表示卡片的内容，我们可以使用<div>标签创建容器和子元素，并为它们添加类名以便于后续操作。

<div class="card-container">
  <div class="card-item">
    <h3>标题1</h3>
    <p>内容1</p>
  </div>
  <div class="card-item">
    <h3>标题2</h3>
    <p>内容2</p>
  </div>
  <!-更多卡片项 -->
</div>

2、CSS样式

为了让折叠卡片具有更好的视觉效果，我们需要为容器和子元素添加一些CSS样式，我们设置容器的宽度、高度和边框样式，接着，我们设置子元素的高度为0,并通过伪元素::before或::after来显示卡片的内容，我们设置卡片的展开和收起按钮的样式。

.card-container {
  width: 300px;
  height: 400px;
  border: 1px solid ccc;
  overflow: hidden;
}
.card-item {
  height: 0;
  padding-bottom: 56.25%; /* 根据字体大小计算 */
  position: relative;
}
.card-item::before,
.card-item::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.card-item::before {
  background-image: url('background.jpg'); /* 背景图片 */
  background-size: cover; /* 让背景图片铺满整个卡片 */
}
.card-item::after {
  background-color: fff; /* 卡片内容的背景颜色 */
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.2); /* 提高卡片内容的可读性 */
}

3、JavaScript交互

为了让用户能够点击卡片来展开或收起内容，我们需要使用JavaScript来实现交互效果，我们可以通过监听容器的点击事件来判断用户是想展开还是收起卡片，当用户点击卡片时，我们修改子元素的高度，并切换相应的类名以实现展开和收起的效果。

document.querySelector('.card-container').addEventListener('click', function (event) {
  var target = event.target;
  if (target.classList.contains('card-item')) { // 如果点击的是卡片项(即子元素)
    var item = target; // 将点击的子元素赋值给变量item
    Array.from(item.parentNode.children).forEach(function (child) { // 将父元素的所有子元素遍历一遍
      var isItem = child === item; // 判断当前子元素是否是被点击的那一项(避免重复操作)
      var height = isItem && item.nextElementSibling !== null // 如果当前子元素是被点击的那一项且有下一项，则设置高度为下一项的高度，否则设置为0(即收起)
        ? parseFloat(child.style.height) + parseFloat(child.nextElementSibling.style.height) * (isItem && child.nextElementSibling !== null) // 根据公式计算高度(根据实际情况调整)
        : '0'; // 或者直接设置为0(即收起)
      Array.from(child.children).forEach(function (grandChild) { // 将当前子元素的所有子元素遍历一遍(即子元素的内容)
        grandChild.style.height = height; // 将子元素的内容高度设置为计算出的高度(根据实际情况调整)
      });
      Array.from(child.nextElementSibling?.children || []).forEach(function (grandChild) { // 将当前子元素的下一项的所有子元素遍历一遍(如果有的话),并执行相同的操作(根据实际情况调整)
        grandChild.style.height = height; // 将下一项的内容高度设置为计算出的高度(根据实际情况调整)