jQuery EasyUI 布局教程：创建折叠面板（Accordion）

在 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" 声明。树形结构使用嵌套的