jQueryUI中的Accordion Widget是一个基于jQuery的可扩展和可折叠内容持有者，它被分成几个部分，可能看起来像标签. jQueryUI提供了accordion()方法来实现这一点.
accordion()方法可以用于两个表格和减号;
$(selector, context).accordion (options)方法
$(selector, context).accordion ("action", params) 方法
accordion(options)方法声明应将HTML元素及其内容作为手风琴菜单进行处理和管理. options 参数是一个对象，它指定所涉及菜单的外观和行为.
$(selector, context).accordion (options);
您可以使用Javascript对象一次提供一个或多个选项.如果要提供多个选项，则使用逗号分隔它们，如下所示;
$(selector, context).accordion({option1: value1, option2: value2..... });下表列出了可与此方法一起使用的不同选项 :
| Sr.No. | 选项&安培;描述 |
|---|---|
| 1 | active 表示首次访问页面时打开的菜单的索引.默认情况下，其值为 0 ，即第一个菜单. 选项 - 有效 表示首次访问页面时打开的菜单的索引.默认情况下，其值为 0 ，即第一个菜单. 这可以是 :
语法
$(".selector").accordion(
{active:2}
); |
| 2 | animate 此选项用于设置如何为更改面板设置动画.默认情况下，其值为 {} . 选项 - 动画 此选项用于设置如何为更改面板设置动画.默认情况下，其值为 {} . 这可以是 :
语法
$(".selector").accordion(
{animate:"bounceslide"}
); |
| 3 | collapsible 此选项设置为 true 时，允许用户通过单击关闭菜单.默认情况下，打开面板标题上的单击无效.默认情况下，其值为 false . 选项 - 可折叠 此选项设置为 true 时，允许用户通过单击关闭菜单.默认情况下，打开面板标题上的单击无效.默认情况下，其值为 false . 语法
$(".selector").accordion(
{collapsible:true}
); |
| 4 | disabled 此选项设置为 true 时会禁用手风琴.默认情况下，其值为 false . 选项 - 已停用 此选项设置为 true 时会禁用手风琴.默认情况下，其值为 false . 语法
$(".selector").accordion(
{disabled:true}
); |
| 5 | event 此选项指定用于选择手风琴标题的事件.默认情况下，其值为点击. 选项 - 事件 此选项指定用于选择手风琴标题的事件.默认情况下，其值为单击. 语法
$(".selector").accordion(
{event:"mouseover"}
); |
| 6 | header 此选项指定一个选择器或元素，以覆盖用于标识标题元素的默认模式.默认情况下，其值为> li> :第一子，> :not(li):even . 选项 - 标题 此选项指定一个选择器或元素，以覆盖用于标识标题元素的默认模式.默认情况下，其值为> li> :第一子，> :not(li):even . 语法
$(".selector").accordion(
{header:"h3"}
); |
| 7 | heightStyle 此选项用于控制手风琴和面板的高度.默认情况下，其值为自动. 选项 - heightStyle 此选项用于控制手风琴和面板的高度.默认情况下，其值为自动. 可能的值为 :
语法
$(".selector").accordion(
{heightStyle:"fill"}
); |
| 8 | icons 此选项是一个对象，用于定义要在打开和关闭面板的标题文本左侧使用的图标.用于关闭面板的图标被指定为名为 header 的属性，而用于打开面板的图标被指定为名为 headerSelected 的属性.默认情况下，其值为 {"header":"ui-icon-triangle-1-e"，"activeHeader":"ui-icon-triangle-1-s"} . 选项 - 图标 此选项是一个对象，用于定义要在左侧使用的图标打开和关闭面板的标题文本.用于关闭面板的图标被指定为名为 header 的属性，而用于打开面板的图标被指定为名为 headerSelected 的属性.默认情况下，其值为 {"header":"ui-icon-triangle-1-e"，"activeHeader":"ui-icon-triangle-1-s"} . 语法
$(".selector").accordion(
{icons:{"header":"ui-icon-plus"，"activeHeader":"ui-icon-minus"}}
); |
以下部分将向您展示一些手风琴小部件功能的工作示例.
以下示例演示了手风琴小部件功能的简单示例，没有将参数传递给 accordion()方法.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Accordion Example </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion-1" ).accordion();
});
</script>
<style>
#accordion-1{font-size: 14px;}
</style>
</head>
<body>
<div id = "accordion-1">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</body>
</html>让我们将上述代码保存在HTML文件 accordionexample.htm 中，并在支持javascript的标准浏览器中打开它，你还必须看到以下输出.现在，您可以使用结果
单击标题（选项卡1，选项卡2，选项卡3）以展开/折叠分为逻辑部分的内容，非常类似于选项卡。
以下示例演示了在JqueryUI的accordion小部件中可折叠的三个选项的用法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Accordion Example </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion-2" ).accordion({
collapsible: true
});
});
</script>
<style>
#accordion-2{font-size: 14px;}
</style>
</head>
<body>
<div id = "accordion-2">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
</body>
</html>让我们将上述代码保存在HTML文件accordionexample.htm中，并在支持javascript的标准浏览器中打开它，您还必须看到以下输出。 现在，你可以玩结果
在这里，我们将折叠设置为true。 单击手风琴标题，这样可以折叠活动部分。
以下示例演示了JqueryUI的accordion小部件中三个选项heightStyle的用法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Accordion Example </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion-3" ).accordion({
heightStyle: "content"
});
$( "#accordion-4" ).accordion({
heightStyle: "fill"
});
});
</script>
<style>
#accordion-3, #accordion-4{font-size: 14px;}
</style>
</head>
<body>
<h3>Height style-content</h3>
<div style = "height:250px">
<div id = "accordion-3">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
<li>List item five</li>
</ul>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
</div>
</div>
</div><br><br>
<h3>Height style-Fill</h3>
<div style = "height:250px">
<div id = "accordion-4">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
<li>List item five</li>
</ul>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</p>
</div>
</div>
</div>
</body>
</html>让我们将上述代码保存在HTML文件accordionexample.htm中，并在支持javascript的标准浏览器中打开它，您还必须看到以下输出。 现在，你可以玩结果
这里我们有两个手风琴，第一个将heightStyle选项设置为content，这允许手风琴面板保持其原始高度。 第二个手风琴的heightStyle选项设置为fill，脚本会自动将手风琴的尺寸设置为其父容器的高度。
手风琴（"动作"，参数）方法可以对手风琴元素执行动作，例如选择/取消选择手风琴菜单。 该操作在第一个参数中指定为字符串（例如，"禁用"禁用所有菜单）。 请查看下表中可以传递的操作。
$(selector, context).accordion ("action", params);;下表列出了可以与此方法一起使用的不同操作
| Sr.No. | Action & Description |
|---|---|
| 1 | destroy 此动作完全破坏元素的手风琴功能。 元素返回到pre-init状态。 Action - destroy 此动作完全破坏元素的手风琴功能。 元素返回到pre-init状态。 Syntax $(".selector").accordion("destroy"); |
| 2 | disable 此操作将禁用所有菜单。 不会考虑任何点击。 此方法不接受任何参数。 Action - disable 此操作将禁用所有菜单。 不会考虑任何点击。 此方法不接受任何参数。 Syntax $(".selector").accordion("disable"); |
| 3 | enable 此操作会重新激活所有菜单。 再次考虑点击次数。 此方法不接受任何参数。 Action - enable 此操作会重新激活所有菜单。 再次考虑点击次数。 此方法不接受任何参数。 Syntax $(".selector").accordion("enable"); |
| 4 | option( optionName ) 此操作使用指定的optionName获取当前关联的accordion元素的值。 这将String值作为参数。 Action - option( optionName ) 此操作使用指定的optionName获取当前关联的accordion元素的值。 这将String值作为参数。 Syntax var isDisabled = $( ".selector" ).accordion( "option", "disabled" ); |
| 5 | option 此操作获取一个对象，该对象包含表示当前折叠选项哈希的键/值对。 Action - option 此操作获取一个对象，该对象包含表示当前折叠选项哈希的键/值对。 Syntax var options = $( ".selector" ).accordion( "option" ); |
| 6 | option( optionName, value ) 此操作设置与指定的optionName关联的accordion选项的值。 Action - option( optionName, value ) 此操作设置与指定的optionName关联的accordion选项的值。 Syntax $( ".selector" ).accordion( "option", "disabled", true ); |
| 7 | option( options ) 此操作为手风琴设置一个或多个选项。 Action - option( options ) 此操作为手风琴设置一个或多个选项。 其中options是要设置的选项 - 值对的映射。 Syntax $( ".selector" ).accordion( "option", { disabled: true } ); |
| 8 | refresh 此操作处理在DOM中直接添加或删除的任何标题和面板。 然后重新计算手风琴面板的高度。 结果取决于内容和heightStyle选项。 此方法不接受任何参数。 Action - refresh 此操作处理在DOM中直接添加或删除的任何标题和面板。 然后重新计算手风琴面板的高度。 结果取决于内容和heightStyle选项。 此方法不接受任何参数。 Syntax $(".selector").accordion("refresh"); |
| 9 | widget 此操作返回accordion小部件元素; 用ui-accordion类名注释的那个。 Action - widget 此操作返回accordion小部件元素; 用ui-accordion类名注释的那个。 Syntax var widget = $( ".selector" ).accordion( "widget" ); |
现在让我们看一个使用上表中的操作的示例。 以下示例演示了使用option（optionName，value）方法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Accordion Example </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion-5" ).accordion({
disabled: false
});
$("input").each(function () {
$(this).change(function () {
if ($(this).attr("id") == "disableaccordion") {
$("#accordion-5").accordion("option", "disabled", true);
} else {
$("#accordion-5").accordion("option", "disabled", false);
}
});
});
});
</script>
<style>
#accordion-5{font-size: 14px;}
</style>
</head>
<body>
<div id = "accordion-5">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
<div style = "margin-top:30px">
<input type = "radio" name = "disable" id = "disableaccordion"
value = "disable">Disable accordion
<input type = "radio" name = "disable" id = "enableaccordion" checked
value = "enable">Enable accordion
</div>
</body>
</html>让我们将上面的代码保存在一个HTML文件accordionexample.htm中，并在支持javascript的标准浏览器中打开它，你还必须看到以下输出
在这里，我们演示了手风琴的启用和禁用。 选择相应的单选按钮以检查每个操作。
除了我们在前面部分中看到的accordion（options）方法之外，JqueryUI还提供了为特定事件触发的事件方法。 这些事件方法如下所列
| Sr.No. | Event Method & Description |
|---|---|
| 1 | activate(event, ui) 激活菜单时会触发此事件。 此事件仅在面板激活时触发，在创建折叠小部件时不会为初始面板触发。 Event - activate(event, ui) 激活菜单时会触发此事件。 此事件仅在面板激活时触发，在创建折叠小部件时不会为初始面板触发。 其中event是Event类型，ui是Object类型。 ui的可能值是
Syntax $( ".selector" ).accordion({
activate: function( event, ui ) {}
}); |
| 2 | beforeActivate(event, ui) 在激活面板之前触发此事件。 可以取消此事件以防止面板激活。 Event - beforeActivate(event, ui) 在激活面板之前触发此事件。 可以取消此事件以防止面板激活。 其中event是Event类型，ui是Object类型。 ui的可能值是
Syntax $( ".selector" ).accordion({
beforeActivate: function( event, ui ) {}
}); |
| 3 | create(event, ui) 创建手风琴时会触发此事件。 Event - create(event, ui) 创建手风琴时会触发此事件。 其中event是Event类型，ui是Object类型。 ui的可能值是
Syntax $( ".selector" ).accordion({
create: function( event, ui ) {}
}); |
以下示例演示了accordion小部件中的事件方法用法。 此示例演示了事件create，beforeActive和active的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Accordion Example </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion-6" ).accordion({
create: function (event, ui) {
$("span#result").html ($("span#result").html () +
"<b>Created</b><br>");
},
beforeActivate : function (event, ui) {
$("span#result").html ($("span#result").html () +
", <b>beforeActivate</b><br>");
},
activate: function (event, ui) {
$("span#result").html ($("span#result").html () +
"<b>activate</b><br>");
}
});
});
</script>
<style>
#accordion-6{font-size: 14px;}
</style>
</head>
<body>
<div id = "accordion-6">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
<hr />
<span id = result></span>
</body>
</html>让我们将上面的代码保存在一个HTML文件accordionexample.htm中，并在支持javascript的标准浏览器中打开它，你还必须看到以下输出
在这里，我们根据事件在底部显示文本。
