css制作折叠按钮

使用CSS和HTML创建折叠按钮

HTML结构需要包含一个触发按钮和可折叠的内容区域：

<button class="collapse-btn">点击展开/折叠</button>
<div class="collapse-content">
  这里是可折叠的内容...
</div>

纯CSS实现方法

通过:checked伪类和相邻兄弟选择器实现：

.collapse-btn {
  background: #4CAF50;
  color: white;
  padding: 10px;
  border: none;
  cursor: pointer;
}

.collapse-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

input[type="checkbox"]:checked + .collapse-btn + .collapse-content {
  max-height: 500px;
}

对应的HTML需要添加隐藏的checkbox：

<input type="checkbox" id="collapse-toggle" hidden>
<label for="collapse-toggle" class="collapse-btn">点击展开/折叠</label>
<div class="collapse-content">
  内容区域
</div>

使用CSS动画效果

为折叠效果添加平滑过渡：

.collapse-content {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: top;
  transform: scaleY(0);
  height: 0;
}

.collapse-btn.active + .collapse-content {
  transform: scaleY(1);
  height: auto;
}

使用details和summary标签

HTML5原生支持的折叠方案：

<details>
  <summary>点击展开/折叠</summary>
  <div class="content">
    这里是可折叠的内容...
  </div>
</details>

对应的基础样式：

details {
  border: 1px solid #ddd;
  padding: 10px;
}

summary {
  cursor: pointer;
  outline: none;
}

details[open] summary {
  margin-bottom: 10px;
}

响应式折叠面板

创建适应不同屏幕尺寸的折叠面板：

@media (max-width: 768px) {
  .collapse-content {
    max-height: 0;
    overflow: hidden;
  }

  .collapse-btn.active + .collapse-content {
    max-height: 1000px;
  }
}

带图标的折叠按钮

在按钮中添加展开/折叠指示图标：

.collapse-btn::after {
  content: '+';
  margin-left: 5px;
}

.collapse-btn.active::after {
  content: '-';
}

这些方法提供了从简单到复杂的多种实现方案，可根据具体需求选择合适的折叠按钮实现方式。纯CSS方案无需JavaScript，适合基础交互需求；而使用HTML5的details元素则具有更好的语义化和浏览器原生支持。