CSS简单折叠菜单实现教程

  
点击展开/收起
  

    
这里是折叠菜单中的内容，可以是任意HTML元素。
  

.menu-header {
  background-color: #444;
  color: white;
  padding: 10px;
  cursor: pointer;
  font-weight: bold;
}
.menu-content {
max-height: 0;
overflow: hidden;
background-color: #f9f9f9;
transition: max-height 0.3s ease-out;
}
.menu-content p {
margin: 10px;
}

/* 当 menu-content 被 target 时展开 */
.menu-content:target {
  max-height: 200px; /* 根据内容调整高度 */
}

  点击展开/收起
  

    
这里是折叠菜单中的内容。
  

.menu-header::after {
  content: " ▼";
  font-size: 0.8em;
  transition: transform 0.3s;
}
.menu-header:hover::after {
opacity: 0.7;
}
/ 收起状态不旋转，展开时向下箭头变向上 /
.menu-content:target ~ .menu-header::after {
transform: rotate(180deg);
}