css制作折叠按钮

2026-01-28 14:32:24CSS

使用CSS制作折叠按钮

通过CSS和HTML可以创建简单的折叠按钮，通常结合<input type="checkbox">和<label>实现交互效果。

HTML结构

<input type="checkbox" id="toggle" class="toggle-checkbox">
<label for="toggle" class="toggle-label">点击展开/折叠</label>
<div class="toggle-content">
  这里是折叠内容，点击按钮显示或隐藏。
</div>

CSS样式

.toggle-checkbox {
  display: none; /* 隐藏原生复选框 */
}

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

.toggle-checkbox:checked ~ .toggle-content {
  max-height: 1000px; /* 足够大的值确保内容完全展开 */
}

.toggle-label {
  display: inline-block;
  padding: 8px 16px;
  background: #f0f0f0;
  cursor: pointer;
  border-radius: 4px;
}

.toggle-label:hover {
  background: #e0e0e0;
}

纯CSS实现箭头动画

为折叠按钮添加动态箭头指示状态：

.toggle-label::after {
  content: "▼";
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.3s;
}

.toggle-checkbox:checked ~ .toggle-label::after {
  transform: rotate(180deg);
}

使用details/summary原生元素

HTML5原生支持折叠效果，无需JavaScript：

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

自定义样式

details {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px;
}

summary {
  cursor: pointer;
  outline: none;
  list-style: none; /* 移除默认三角图标 */
}

summary::-webkit-details-marker {
  display: none; /* 针对Webkit浏览器移除默认图标 */
}

summary::after {
  content: "▶";
  display: inline-block;
  margin-left: 8px;
}

details[open] summary::after {
  content: "▼";
}