当前位置：首页 > news >正文

jQuery UI 实例 - 折叠面板（Accordion）

news 2026/5/30 19:05:27

jQuery UI Accordion（折叠面板）实例

Accordion是 jQuery UI 中最经典、最常用的组件之一，常用于侧边栏导航、FAQ 问答、设置面板、商品详情等场景。

官方演示地址：https://jqueryui.com/accordion/

下面提供从基础到高级的完整实例，直接复制即可运行（使用最新 CDN）。

1.最基础折叠面板

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>jQuery UI Accordion 基础示例</title><linkrel="stylesheet"href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css"><scriptsrc="//code.jquery.com/jquery-3.6.0.min.js"></script><scriptsrc="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script><style>body{font-family:"Microsoft YaHei",Arial;}</style></head><body><divid="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.多层嵌套 + 手风琴嵌套

<divid="accordion"><h3>前端框架</h3><div><divid="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.事件监听 + 动态添加面板

<buttonid="addPanel">动态添加一个面板</button><script>$("#accordion").accordion({activate:function(event,ui){// 每次切换面板时触发console.log("当前展开的是：",ui.newHeader.text());}});letcount=5;$("#addPanel").click(function(){constnewHeader=`<h3>新面板${count}</h3>`;constnewContent=`<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>