jQuery EasyUI 布局 - 创建折叠面板
jQuery EasyUI 布局 - 创建折叠面板（Accordion）
jQuery EasyUI的accordion组件是一种经典的折叠面板（collapsible panels），它允许将多个面板垂直（或水平）堆叠。所有面板的标题始终可见，但一次只能展开一个（或多个）面板的内容区域。点击标题即可展开/折叠，常用于左侧导航菜单、设置面板、FAQ 等场景。
Accordion基于panel组件构建，支持图标、AJAX 加载内容、多选模式等。
官方参考：
- 教程：https://www.jeasyui.com/tutorial/layout/accordion.php
- 文档：https://www.jeasyui.com/documentation/accordion.php
- 在线 Demo：https://www.jeasyui.com/demo/main/index.php?plugin=Accordion
步骤 1: 引入 EasyUI 资源
<linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/default/easyui.css"><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/icon.css"><scripttype="text/javascript"src="https://code.jquery.com/jquery-1.12.4.min.js"></script><scripttype="text/javascript"src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>步骤 2: 创建基本的折叠面板
在容器<div>上添加class="easyui-accordion"，子<div>为每个面板。
<divclass="easyui-accordion"style="width:300px;height:400px;"><divtitle="关于 EasyUI"data-options="iconCls:'icon-ok',selected:true"style="padding:10px;"><h3>jQuery EasyUI 框架</h3><p>EasyUI 是一个基于 jQuery 的完整 UI 框架，帮助你快速构建现代交互式 Web 应用。</p></div><divtitle="语言支持"data-options="iconCls:'icon-search'"style="padding:10px;">支持多种语言和主题切换。<br>可以轻松集成到后台管理系统。</div><divtitle="树形菜单"data-options="iconCls:'icon-reload'"><!-- 这里可以放置 tree 组件 --><ulclass="easyui-tree"><li>用户管理</li><li>角色管理</li><li>权限设置</li></ul></div><divtitle="AJAX 加载面板"data-options="href:'content.html'"><!-- 内容通过 AJAX 从 content.html 加载 --></div></div>步骤 3: 常用属性说明
| 属性 | 说明 |
|---|---|
fit:true | 自动填充父容器（常用于 layout 的 west 区域） |
border:false | 去除边框，适合嵌入布局 |
selected:true | 初始展开该面板（默认第一个） |
iconCls | 标题栏图标 |
multiple:true | 允许多个面板同时展开（默认 false，只展开一个） |
href:'url' | AJAX 加载面板内容（懒加载） |
| `halign:'left | center |
步骤 4: 完整示例（结合 layout + tree + 多选模式）
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>jQuery EasyUI 折叠面板（Accordion）</title><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/default/easyui.css"><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/icon.css"><scripttype="text/javascript"src="https://code.jquery.com/jquery-1.12.4.min.js"></script><scripttype="text/javascript"src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script></head><body><h2>jQuery EasyUI 折叠面板示例</h2><divstyle="width:400px;height:500px;margin:20px auto;"><divclass="easyui-accordion"data-options="fit:true,border:false,multiple:true"><divtitle="系统管理"iconCls="icon-setting"selected="true"><ulclass="easyui-tree"style="margin:10px;"><liiconCls="icon-user">用户管理</li><liiconCls="icon-group">角色管理</li><liiconCls="icon-lock">权限设置</li></ul></div><divtitle="内容管理"iconCls="icon-folder"><pstyle="padding:10px;">文章列表、分类管理、评论审核等功能。</p></div><divtitle="数据统计"iconCls="icon-chart"><pstyle="padding:10px;">销售报表、访问统计、图表展示。</p></div><divtitle="远程加载"href="https://www.jeasyui.com/tutorial/layout/accordion_data.html"><!-- 示例：从官方教程加载内容 --></div></div></div><script>$(function(){// 可选：动态添加/移除面板// $('#aa').accordion('add', {title:'新面板', content:'新内容'});});</script></body></html>关键说明
- 默认行为：点击标题展开/折叠，只有一个面板展开。
- 多选模式：添加
multiple:true，允许多个同时展开。 - 嵌入布局：在 layout 的 west/east 区域使用
fit:true，常用于后台左侧菜单。 - AJAX 加载：使用
href属性延迟加载内容，提高性能。 - 事件：
onSelect、onAdd等，可监听展开、添加面板。
扩展建议
- 水平折叠面板：添加
halign:'left'等属性。 - 动态操作：使用
$('#aa').accordion('add',{title:'新面板',content:'...'})添加面板。 - 结合 tree：如示例，常用于导航菜单。
更多示例：
- 基本 Accordion：https://www.jeasyui.com/demo/main/index.php?plugin=Accordion&theme=default&dir=ltr&pitem=
- AJAX 加载：https://www.jeasyui.com/easyui/demo/accordion/ajax.html
- 水平 Accordion：https://www.jeasyui.com/easyui/demo/accordion/horizontal.html
如果需要动态添加面板、水平手风琴、或结合 layout 的完整后台左侧菜单示例，请提供更多细节！