在 Web 页面中，折叠面板常用于将大量内容分区展示，用户点击标题即可展开对应区域。本文将演示如何使用 jQuery EasyUI 的 Accordion 组件快速创建折叠面板，并说明关键属性的作用及嵌套树形菜单的实现方式。
折叠面板的基本概念
jQuery EasyUI 的折叠面板（Accordion）由多个面板（panel）组成。所有面板的头部（header）始终可见，但同一时间仅有一个面板的 body 内容处于展开状态。当用户点击某个面板的头部时，该面板内容展开，其余面板自动收起。这种交互模式非常适合用于侧边栏导航、设置项分组或帮助文档的目录展示。
创建折叠面板的完整代码
使用 EasyUI 创建折叠面板无需编写复杂的 JavaScript，只需通过 HTML 标记并添加对应的 class 即可。以下示例展示了一个宽度为 300px、高度为 200px 的折叠面板，包含三个独立面板：
Accordion for jQuery
Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.
easyui help you build your web page easily
-
Folder1
-
Sub Folder 1
- File 11
- File 12
- File 13
- File 2
- File 3
- File2
关键属性与结构说明
上述代码中使用了 EasyUI 提供的声明式初始化方式，核心结构如下：
class="easyui-accordion"：外层容器标记，用于声明这是一个折叠面板组件。title：定义每个面板头部显示的标题文本。iconCls：为面板头部添加图标，例如icon-ok和icon-reload是 EasyUI 内置图标类。selected="true"：指定页面加载时默认展开的面板。示例中第二个面板设置了该属性，因此初始状态下该面板内容可见。style：通过内联样式控制容器尺寸、内边距及内容溢出处理（如overflow:auto可在内容超出时显示滚动条）。
在面板中嵌入树形菜单
折叠面板的 body 区域可以容纳任意 HTML 内容。示例中的第三个面板嵌入了一个树形菜单（Tree），通过 class="easyui-tree" 声明。树形结构使用嵌套的 标签构建，支持多级展开与折叠。这种组合方式常用于后台管理系统的左侧导航栏，用户可在不同功能模块间快速切换。
实际项目中，若需动态加载树节点数据，可通过 EasyUI 的 Tree 组件 API 配置 url 属性从服务器获取 JSON 数据，而非在 HTML 中硬编码节点结构。
