CSS 如何实现手风琴菜单？

Question

CSS 如何实现手风琴菜单？

仓乃文 · Accepted Answer

手风琴菜单通过 :target 伪类或 checkbox hack 实现点击展开/收起，配合 max-height 过渡实现平滑动画。 ```css .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .accordion input:checked ~ .accordion-content { max-height: 500px; } .accordion label { display: block; padding: 10px; background: #f5f5f5; cursor: pointer; border-bottom: 1px solid #ddd; } ``` HTML 结构： ```html

菜单项 1

内容 1

``` 补充说明： - 使用 radio + :checked 实现互斥展开（同时只能展开一个） - 使用 checkbox 可实现多个同时展开 - max-height 过渡实现动画，值需大于实际内容高度 - 纯 CSS 实现，无需 JavaScript