CSS 纯CSS折叠/展开div

在本文中，我们将介绍如何使用纯CSS实现折叠和展开div的效果。这种效果可以用于创建可展开的菜单、收缩/展开的内容区域等。

阅读更多：CSS 教程

使用checkbox实现折叠/展开

我们可以使用checkbox的选中状态作为开关，通过CSS控制目标div的展示和隐藏。下面是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    #toggle {
      display: none;  /* 隐藏checkbox */
    }

    #content {
      display: none;  /* 初始时隐藏内容 */
    }

    #toggle:checked ~ #content {
      display: block;  /* 如果toggle被选中，则显示内容 */
    }
  </style>
</head>
<body>
  <input type="checkbox" id="toggle">
  <label for="toggle">点击这里展开/收缩内容</label>
  <div id="content">
    这里是要展开/收缩的内容。
  </div>
</body>
</html>

在上面的代码中，我们通过给checkbox设置display: none;隐藏它，然后使用:checked伪类选择器来检测checkbox是否被选中。当checkbox被选中时，使用~选择器找到其后面的#content元素，并将其显示出来。

使用伪类和过渡效果实现动画折叠/展开

除了上面的简单折叠/展开效果，我们还可以给折叠和展开添加动画效果，使过渡更平滑。下面是一个示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    #toggle {
      display: none;
    }

    #content {
      height: 0;
      overflow: hidden;
      transition: height 0.3s ease; /* 添加过渡效果 */
    }

    #toggle:checked ~ #content {
      height: 100px; /* 展开时的高度 */
    }
  </style>
</head>
<body>
  <input type="checkbox" id="toggle">
  <label for="toggle">点击这里展开/收缩内容</label>
  <div id="content">
    这里是要展开/收缩的内容。
  </div>
</body>
</html>

在上面的代码中，我们给#content设置一个初始高度为0，并通过overflow: hidden;隐藏内容。然后使用transition属性为高度添加了一个过渡效果，设置过渡时间为0.3秒，并使用ease函数使过渡更平滑。当checkbox被选中时，将#content的高度设置为100px，实现了展开的动画效果。