jQuery UI Accordion（折叠面板）实例
Accordion 是 jQuery UI 中最经典、最常用的组件之一，常用于侧边栏导航、FAQ 问答、设置面板、商品详情等场景。
官方演示地址：https://jqueryui.com/accordion/
下面提供从基础到高级的完整实例，直接复制即可运行（使用最新 CDN）。
1. 最基础折叠面板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion 基础示例</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<style>
body { font-family: "Microsoft YaHei", Arial; }
</style>
</head>
<body>
<div id="accordion">
<h3>前端开发</h3>
<div>
<p>HTML、CSS、JavaScript 是前端三大基石。</p>
<ul>
<li>HTML 负责结构</li>
<li>CSS 负责样式</li>
<li>JavaScript 负责交互</li>
</ul>
</div>
<h3>后端开发</h3>
<div>
<p>常见后端语言有 Java、Python、Node.js、PHP 等。</p>
</div>
<h3>数据库</h3>
<div>
<p>MySQL、MongoDB、Redis 是最常用的数据库。</p>
</div>
<h3>运维与部署</h3>
<div>
<p>Docker + Nginx + Jenkins 是现代部署标配。</p>
</div>
</div>
<script>
$(function() {
$("#accordion").accordion();
});
</script>
</body>
</html>2. 常用选项配置（高度自适应、默认展开、图标自定义）
<script>
$("#accordion").accordion({
heightStyle: "content", // 高度随内容自适应（推荐！）
collapsible: true, // 允许全部收起
active: 0, // 默认展开第1个（0表示第一个）
// active: false, // 配合 collapsible: true 可实现默认全部收起
icons: { // 自定义展开/收起小箭头
header: "ui-icon-triangle-1-e",
activeHeader: "ui-icon-triangle-1-s"
},
header: "> div > h3" // 如果结构不是直接 h3，可自定义选择器
});
</script>3. 多层嵌套 + 手风琴嵌套
<div id="accordion">
<h3>前端框架</h3>
<div>
<div id="nested"> <!-- 嵌套一个 accordion -->
<h3>Vue.js</h3>
<div><p>渐进式 JavaScript 框架，易上手</p></div>
<h3>React</h3>
<div><p>Facebook 出品，组件化开发</p></div>
<h3>Angular</h3>
<div><p>Google 出品，功能最完整</p></div>
</div>
</div>
<h3>UI 组件库</h3>
<div>
<p>Element UI、Ant Design、Bootstrap、Layui 等</p>
</div>
</div>
<script>
$("#accordion").accordion({
heightStyle: "content",
collapsible: true
});
$("#nested").accordion({ // 嵌套的也要单独初始化
heightStyle: "content",
collapsible: true
});
</script>4. 事件监听 + 动态添加面板
<button id="addPanel">动态添加一个面板</button>
<script>
$("#accordion").accordion({
activate: function(event, ui) {
// 每次切换面板时触发
console.log("当前展开的是：", ui.newHeader.text());
}
});
let count = 5;
$("#addPanel").click(function() {
const newHeader = `<h3>新面板 ${count}</h3>`;
const newContent = `<div><p>这是动态添加的内容，你可以放任何 HTML。</p></div>`;
$("#accordion").append(newHeader + newContent);
// 关键：添加后必须刷新 accordion
$("#accordion").accordion("refresh");
count++;
});
</script>5. 完整美化版（带图标、颜色、圆角）
<style>
.ui-accordion-header {
background: #3498db;
color: white;
border-radius: 6px 6px 0 0;
margin-bottom: 4px;
padding-left: 40px !important;
position: relative;
}
.ui-accordion-header::before {
content: "▶";
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
}
.ui-accordion-header-active::before { content: "▼"; }
.ui-accordion-content {
border: 1px solid #ddd;
border-top: none;
border-radius: 0 0 6px 6px;
padding: 15px !important;
}
</style>小技巧总结：
- 推荐始终加
heightStyle: "content"，避免内容被裁剪。 - 想默认全部收起 →
collapsible: true, active: false - 想通过 URL hash 打开指定面板 → 使用
active: "#section3"或配合 JS - 移动端建议加
event: "click touchstart"支持触摸
需要我给你一个 左侧导航菜单完整模板、FAQ 问答页面、或 配合 Tabs 做选项卡+折叠面板组合 的实例吗？直接说！
