1. 引入 jQuery 和 jQuery UI：
在使用 jQuery UI 的 Accordion 之前，确保已经引入了 jQuery 和 jQuery UI，并在其后引入 Accordion 插件。
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
2. HTML 结构：
创建一个 HTML 结构，其中包含需要展开和折叠的内容。
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>Content for section 1.</p>
</div>
<h3>Section 2</h3>
<div>
<p>Content for section 2.</p>
</div>
<!-- Add more sections as needed -->
</div>
3. 初始化 Accordion：
使用 jQuery UI 的 accordion() 方法初始化 Accordion。
$(document).ready(function(){
$("#accordion").accordion();
});
这样就使得 #accordion 成为一个可折叠的面板，其中的每个 <h3> 标签代表一个可点击的标题，对应的 <div> 元素包含了折叠的内容。
4. 自定义选项：
可以通过传递一个包含选项的对象来自定义 Accordion 的行为。
$(document).ready(function(){
$("#accordion").accordion({
collapsible: true, // 是否允许折叠所有部分
heightStyle: "content" // 设置部分高度的方式，可选值："auto", "fill", "content"
});
});
在这个例子中，设置了 collapsible: true 允许折叠所有部分，而 heightStyle: "content" 将使每个部分的高度适应其内容。
这是 jQuery UI Accordion 插件的基本用法。您可以根据需要进一步自定义样式和行为。
转载请注明出处：http://www.pingtaimeng.com/article/detail/12906/jQuery