Accordion（或Accordion菜单）指分组且可折叠的面板集，能在有限的空间里提供大量链接或是其它可选择的内容供访问。

每个内嵌式面板有可能单独展开（这时往往其它面板都会闭合），通常鼠标经过或是点击特定面板的标题（或是面板上的展开/折叠元素），就会展开一组子选项。

解决了什么问题？

如果想在有限的空间里塞入大量内容，或是当内容一次性全部展示时会导致用户无所适从时，问题就来了，怎样才能以易于用户理解的方式，让用户同时访问大量内容，又不需要滚动页面。滚动页面会让用户离开他们更喜欢的上下文环境或是页面位置。

什么时候使用该模式？

当可选项非常多，空间又有限，而且内容列表可以有逻辑地分组为规模更小且尺寸相当的块状内容时。

解决方案是什么？

提供两级的选项集

• Ÿ   第一级是分类或分组
• Ÿ   第二级是各组内的选项列表

Accordion通常被设计为一些可折叠的面板（不是那种有层次的树状结构），第一级分类通常被用作标签。分类标签通常用作全长度的控制柄，或同时提供了相应的扩展/折叠图标。Accordion通常默认会显示一个初始面板。

建议

Ÿ   默认打开最重要的面板，这样既是为了显示最重要的选择，同时也透露出这样的一个事实，即每个折叠着的列表都是可以打开的。

Ÿ   高亮显示当前打开的面板，这样用户可以把已打开面板的标题与关闭着的面板的标题区别开。

Ÿ   不要在Accordion里再放置Accordion，如果你真的需要这样做，考虑树状结构，或是其它更合适多级结构的元素更加合适。

选择

Accordion可以配置为，要求至少打开一个面板，或是允许其它更灵活的模式，比如允许关闭所有面板、允许打开多个面板等。有些业内人士认为，只允许同时打开一个面板是最佳实践，但也有不这样认为。

Ÿ   Accordion可以配置为一次只能打开一个面板，但在许多例子里，它支持同时打开多个面板。

Ÿ   除非版面或是其它不可变更的设计限制要求Accordion保持大小一致，否则它应该可以改变尺寸以容纳不同尺寸的面板。

Ÿ   在许多案例中，只有单击才能打开Accordion里的面板，但在有些上下文环境中，比如在展示“高兴”/有趣/“嘿，来看看”这样的元素时，鼠标经过时就展示面板也是可以的。

为什么使用该模式？

首要原因是，使用Accordion元素可以在有限的空间里塞入大量内容。

特殊用例

大多数Accordion是垂直排列的，但也有些是水平排列的。

可访问性

对于键盘用户来说，Accordion最后要么像树状视图要么像标签视图。Accordion上有可能增加键盘导航，比如用Tab键控制标签切换，上/下方向箭头在不同的面板间切换。

如果JavaScript被禁用，那么Accordion应该退而求其次作些有用的改变，比如同时展示所有面板。

完全不显示任何面板并不可取，因为这有可能让屏幕阅读器找不到内容。因此不妨考虑设置高度为0px.

Accordion – Yahoo Design Pattern Library

原文链接：http://developer.yahoo.com/ypatterns/navigation/accordion.html