jQuery UI 实例 - 折叠面板（Accordion）
jQuery UI 折叠面板（Accordion）实例
jQuery UI 折叠面板（Accordion）是一种非常实用的界面组件，可以将大量内容进行整合，将用户需要查看的内容缩小至一个可扩展的标题。
使用方法
下面是使用jQuery UI 折叠面板（Accordion）的简单示例：
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI 折叠面板示例</title>
<!-- 导入jQuery、jQuery UI文件 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("#accordion").accordion();
});
</script>
</head>
<body>
<div id="accordion">
<h3>第一个标签</h3>
<div>
<p>这里是第一个折叠面板的内容</p>
</div>
<h3>第二个标签</h3>
<div>
<p>这里是第二个折叠面板的内容</p>
</div>
<h3>第三个标签</h3>
<div>
<p>这里是第三个折叠面板的内容</p>
</div>
</div>
</body>
</html>
参数设置
Accordion组件的默认参数可以被完全自定义。下列参数可以通过accordion()方法中传递下列选项对象来修改：
- active: false
设置默认开启的面板序号，默认值为0，即第一个面板。如果设置为
false，则全部都关闭。
- animate: true
是否开启动画效果，默认为true开启。
- collapsible: false
是否允许折叠面板全部关闭，默认为false，即不能全部关闭。
- event: “click”
触发事件类型，默认为“click”。
- header: “> h3”
标题选择器，默认为“> h3”。
- heightStyle: “content”
折叠面板高度设置，默认为“content”，即固定高度只有当面板中有内容的时候。
- icons: { activeHeader: “ui-icon-circle-arrow-s”, header: “ui-icon-circle-arrow-e” }
折叠面板箭头图标设置，默认值
{ activeHeader: "ui-icon-circle-arrow-s", header: "ui-icon-circle-arrow-e"}
自定义样式
可以通过修改CSS样式来实现自定义折叠面板的效果。比如，使用以下的CSS代码可以把折叠面板的背景颜色设为灰色，并将标题和内容的字体设为白色：
.ui-accordion {
background-color: #ddd;
}
.ui-accordion-header {
background-color: #333;
color: #fff;
}
.ui-accordion-content {
background-color: #333;
color: #fff;
}
结语
jQuery UI 折叠面板（Accordion）是一种非常实用的界面组件。借助它，可以将界面中的大量内容进行整合，让用户更加方便地查看所需内容。此外，它非常容易使用和定制，您可以灵活地定制自己的界面效果。