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 资源
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>步骤 2: 创建基本的折叠面板
在容器 <div> 上添加 class="easyui-accordion"，子 <div> 为每个面板。
<div class="easyui-accordion" style="width:300px;height:400px;">
<div title="关于 EasyUI" data-options="iconCls:'icon-ok',selected:true" style="padding:10px;">
<h3>jQuery EasyUI 框架</h3>
<p>EasyUI 是一个基于 jQuery 的完整 UI 框架，帮助你快速构建现代交互式 Web 应用。</p>
</div>
<div title="语言支持" data-options="iconCls:'icon-search'" style="padding:10px;">
支持多种语言和主题切换。<br>
可以轻松集成到后台管理系统。
</div>
<div title="树形菜单" data-options="iconCls:'icon-reload'">
<!-- 这里可以放置 tree 组件 -->
<ul class="easyui-tree">
<li>用户管理</li>
<li>角色管理</li>
<li>权限设置</li>
</ul>
</div>
<div title="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|right' | 水平手风琴模式（horizontal accordion） |
步骤 4: 完整示例（结合 layout + tree + 多选模式）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI 折叠面板（Accordion）</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>jQuery EasyUI 折叠面板示例</h2>
<div style="width:400px;height:500px;margin:20px auto;">
<div class="easyui-accordion" data-options="fit:true,border:false,multiple:true">
<div title="系统管理" iconCls="icon-setting" selected="true">
<ul class="easyui-tree" style="margin:10px;">
<li iconCls="icon-user">用户管理</li>
<li iconCls="icon-group">角色管理</li>
<li iconCls="icon-lock">权限设置</li>
</ul>
</div>
<div title="内容管理" iconCls="icon-folder">
<p style="padding:10px;">文章列表、分类管理、评论审核等功能。</p>
</div>
<div title="数据统计" iconCls="icon-chart">
<p style="padding:10px;">销售报表、访问统计、图表展示。</p>
</div>
<div title="远程加载" 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 的完整后台左侧菜单示例，请提供更多细节！
