在css中如何制作折叠菜单

<div class="accordion">
  <input type="checkbox" id="menu-toggle" class="menu-checkbox">
  <label for="menu-toggle" class="menu-label">点击展开菜单</label>
  <div class="menu-content">
    <a href="#">选项 1</a>
    <a href="#">选项 2</a>
    <a href="#">选项 3</a>
  </div>
</div>

.accordion {
  width: 200px;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
}
<p>.menu-checkbox {
display: none; /<em> 隐藏复选框 </em>/
}</p><p>.menu-label {
display: block;
background: #007bff;
color: white;
padding: 10px;
text-align: center;
cursor: pointer;
user-select: none;
}</p><p>.menu-content {
max-height: 0;
overflow: hidden;
background: #f9f9f9;
transition: max-height 0.3s ease;
}</p><p>/<em> 当复选框被选中时，展开内容 </em>/
.menu-checkbox:checked ~ .menu-content {
max-height: 200px; /<em> 设置足够高度以容纳内容 </em>/
}</p>

.menu-label::after {
  content: " ▼";
  font-size: 0.8em;
}
<p>.menu-checkbox:checked ~ .menu-label::after {
content: " ▲";
}</p>