壹心理手风琴菜单这个东西，几乎每个做界面的都碰过。刚入行那会儿，我觉得它就是个"能展开能收起的列表"，没什么技术含量。直到后来做了几个后台管理系统和移动端项目，被各种空间不够、层级混乱、用户找不到入口的问题反复折腾之后，我才意识到，手风琴菜单真正厉害的地方，是用"折叠"这种交互方式，在有限的空间里讲清楚了信息的层级关系。它不是什么炫技组件，而是一个空间叙事工具——什么时候该折叠、折叠到什么程度、展开之后如何引导视线，这里面全是门道。
这篇文章，我想把自己在这些年实战中攒下来的设计思路、交互细节、代码实现和踩坑记录做个梳理。不管你是UI设计师、前端开发，还是产品经理，只要你的界面里出现过"内容太多放不下"的窘境，手风琴菜单都值得你重新审视一遍。
1. 手风琴菜单到底是什么——先把家族的底细摸清
1.1 从乐器到界面：名字背后的交互逻辑
手风琴这个名字，起得相当传神。你回想一下手风琴乐器的样子：一排琴键，中间是风箱，演奏时风箱被拉开、合拢，气流推动簧片发声。界面里的手风琴菜单也是一样——一组垂直排列的面板，每次可以拉开展开一个，其余面板随之合拢。一张一合之间，内容被"挤"出来或者"压"回去，跟风箱的动作几乎一模一样。
我第一次接触这个组件的时候，还是拿jQuery手写的。当时的需求很简单：一个侧边栏，里面有十几个功能菜单，分类很多，屏幕放不下。最早的方案是全部平铺，结果整个侧边栏长到需要滚动好几屏，用户找"订单管理"这种高频入口，得在密密麻麻的文字里翻半天。后来改成手风琴结构，一级菜单只有5个分类，点开某个分类才露出底下的二级菜单，整个侧边栏从一眼望不到头，变成了一屏之内清清楚楚。
这个改造给我最大的启发是：手风琴菜单不是简单地"省空间"，它其实是在模仿人脑的归类方式。我们整理文件时，不会把所有纸张摊在桌面上，而是分成几个文件夹，需要哪个就抽出来看。手风琴菜单做的正是这件事——用折叠把次要信息暂时藏起来，让主要信息占据视觉焦点。它的核心价值不是"把100个条目塞进50像素"，而是"让用户知道，这100个条目可以按5个逻辑分组来理解"。
1.2 手风琴解决的核心问题：空间与层级的双重博弈
做界面时间长了你会发现，几乎所有布局问题都能归到两个矛盾上：信息总量和可用空间之间的矛盾，信息层级和信息陈列方式之间的矛盾。手风琴菜单恰好同时回应了这两个问题。
先看空间。移动端屏幕宽度通常只有375像素左右，一个页面从上到下能放得下的内容十分有限。假如有一个"个人中心"页面，里面要展示头像、昵称、订单、收货地址、优惠券、设置等十几个功能入口，全平铺开来，光入口列表就得占掉两三屏。这时候折叠就帮你把整个功能列表压缩成几行，用户想找什么，点开对应分组就行。桌面端的后台管理同理，侧边栏宽度就那些，几十个菜单项硬排上去只能越排越密，最后字小到看不清，点击目标小到点不准，那才是灾难。
再看层级。信息一旦超过两层，平铺展示会让所有等级看起来都一样重要，用户分不清"哪个是入口、哪个是内容、哪个是辅助"。手风琴菜单天然带有层级暗示——一级菜单通常做加粗、高亮、带图标，二级菜单缩进排列，展开时二级菜单从属在一级之下。这种视觉上的"包含关系"，配合展开收起时的动效，让用户哪怕不看文字，也能感觉到"这是一个大类下面的小功能"。
当然，手风琴菜单不是万能的。它适合"结构清晰、层级固定、低频切换"的信息组织，不适合那些需要用户频繁来回对比内容的场景。比如你让用户在两三个长表单之间来回切换填写，手风琴那种"开一个关一个"的机制就会让人很抓狂。这个边界后面我会专门展开讲。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 手风琴菜单的适用场景与选型对照——不要见坑就跳
2.1 这些场景上手风琴，效果立竿见影
在我做过的项目里，有六类场景使用手风琴菜单的效果是比较稳的，分享出来供你参考。
第一类是侧边栏导航。后台管理系统、SaaS工作台这类产品，侧边栏的菜单层级普遍达到三级：一级是模块，二级是功能页，三级是具体操作页。平铺会显得很乱，用手风琴可以让用户按模块浏览，找东西的思路和产品设计的思路保持一致。我做过一个客服工单系统，左侧模块有"会话管理""客户管理""工单中心""数据分析""系统设置"五个，每个模块下面又有五到十个子页面，总菜单项接近四十个。如果不折叠，40个条目全部竖排在侧边栏里，视觉噪声极大，用户根本找不到目标。改成手风琴之后，默认只显示5个一级模块，打开"工单中心"才看到"待处理工单""已分配工单""工单模板""工单统计"这些子项，那感觉就很清爽。
第二类是移动端的个人中心。电商App的"我的"页面，功能入口动辄二十多个，而且很多入口的分类归属还时不时调整。手风琴或者"折叠分组"的交互能把"我的订单""我的优惠""我的钱包"等大分组收起来，用户想看哪块点哪块，减少信息轰炸。
第三类是设置页面。系统设置、偏好设置、隐私设置这些内容，天然就是按区块划分的。iOS的"设置"App里，很多分组本身就是折叠和展开的，比如"通知"下面细分"允许通知""声音""横幅"等开关。手风琴在这里承担了"分组收纳"的职责，让上百个开关设置不至于铺满整个屏幕。
第四类是FAQ和帮助中心。用户带着问题来，通常带着两个临时需求：看到最可能回答自己问题的那一条，以及快速浏览有哪些问题类别。手风琴天然适合问答结构——列表展示问题标题，点开一条显示答案