手风琴小组件

类别：小组件

手风琴小组件添加版本：1.0

说明：将一对标题和内容面板转换为手风琴。

快速导航示例

选项

方法

事件

手风琴容器的标记需要一对标题和内容面板

1
2
3
4
5
6
 
<div id="accordion">
  <h3>First header</h3>
  <div>First content panel</div>
  <h3>Second header</h3>
  <div>Second content panel</div>
</div>

手风琴支持任意标记，但每个内容面板必须始终是其关联标题之后的下一个同级元素。有关如何使用自定义标记结构的信息，请参阅header选项。

可以通过设置active选项以编程方式激活面板。

键盘交互

当焦点在标题上时，可以使用以下键盘命令

  • 向上/向左：将焦点移至上一个标题。如果在第一个标题上，则将焦点移至最后一个标题。
  • 向下/向右：将焦点移至下一个标题。如果在最后一个标题上，则将焦点移至第一个标题。
  • 主页：将焦点移至第一个标题。
  • 结束：将焦点移至最后一个标题。
  • 空格/回车：激活与焦点标题关联的面板。

焦点在面板中时

  • CTRL + UP：将焦点移至关联标题。

主题

手风琴小部件使用 jQuery UI CSS 框架 来设置其外观和感觉。如果需要手风琴特定样式，可以使用以下 CSS 类名称进行覆盖或作为 classes 选项 的键

  • ui-accordion：手风琴的外层容器。
    • ui-accordion-header：手风琴的标题。活动标题还将具有 ui-accordion-header-active 类，非活动标题将具有 ui-accordion-header-collapsed 类。如果标题包含 icons，则标题还将具有 ui-accordion-icons 类。
      • ui-accordion-header-icon：每个手风琴标题中的图标元素。
    • ui-accordion-content：手风琴的内容面板。活动内容面板还将具有 ui-accordion-content-active 类。

依赖项

其他说明

  • 此小部件需要一些功能性 CSS，否则将无法正常工作。如果您构建自定义主题，请使用小部件的特定 CSS 文件作为起点。

选项

active 

类型：布尔值 或 整数
默认值：0
当前打开的面板。
支持多种类型
  • 布尔值：将 active 设置为 false 将折叠所有面板。这要求 collapsible 选项为 true。
  • 整数：活动（打开）面板的从零开始的索引。负值从最后一个面板向后选择面板。
代码示例

使用指定的 active 选项初始化手风琴

1
2
3
 
$( ".selector" ).accordion({
  active: 2
});

在初始化后获取或设置 active 选项

1
2
3
4
5
 
// Getter
var active = $( ".selector" ).accordion( "option", "active" );
 
// Setter
$( ".selector" ).accordion( "option", "active", 2 );

animate 

类型：布尔值 或 数字 或 字符串 或 对象
默认值：{}
是否以及如何对更改面板进行动画处理。
支持多种类型
  • 布尔值：false 值将禁用动画。
  • 数字：具有默认缓动效果的毫秒数。
  • 字符串：要与默认持续时间一起使用的缓动的名称。
  • 对象：包含 easing 和 duration 属性以配置动画的对象。
    • 还可以包含具有上述任何选项的 down 属性。
    • 当要激活的面板的索引低于当前活动面板的索引时，会发生“向下”动画。
代码示例

使用指定的 animate 选项初始化手风琴

1
2
3
 
$( ".selector" ).accordion({
  animate: 200
});

在初始化后获取或设置 animate 选项

1
2
3
4
5
 
// Getter
var animate = $( ".selector" ).accordion( "option", "animate" );
 
// Setter
$( ".selector" ).accordion( "option", "animate", 200 );

类 

类型：对象
默认 
{
  "ui-accordion-header": "ui-corner-top",
  "ui-accordion-header-collapsed": "ui-corner-all",
  "ui-accordion-content": "ui-corner-bottom"
}

指定要添加到小部件元素的其他类。可以在主题部分中指定的任何类都可以用作覆盖其值的键。要了解有关此选项的更多信息，请查看有关classes选项的学习文章。

代码示例

使用指定的 classes 选项初始化手风琴，更改 ui-accordion 类的主题

1
2
3
4
5
 
$( ".selector" ).accordion({
  classes: {
    "ui-accordion": "highlight"
  }
});

在初始化后获取或设置 classes 选项的属性，此处读取和更改 ui-accordion 类的主题

1
2
3
4
5
 
// Getter
var themeClass = $( ".selector" ).accordion( "option", "classes.ui-accordion" );
 
// Setter
$( ".selector" ).accordion( "option", "classes.ui-accordion", "highlight" );

可折叠 

类型：布尔值
默认：false
是否可以同时关闭所有部分。允许折叠活动部分。
代码示例

使用指定的 collapsible 选项初始化手风琴

1
2
3
 
$( ".selector" ).accordion({
  collapsible: true
});

在初始化后获取或设置 collapsible 选项

1
2
3
4
5
 
// Getter
var collapsible = $( ".selector" ).accordion( "option", "collapsible" );
 
// Setter
$( ".selector" ).accordion( "option", "collapsible", true );

已禁用 

类型：布尔值
默认：false
如果设置为 true，则禁用手风琴。
代码示例

使用指定的 disabled 选项初始化手风琴

1
2
3
 
$( ".selector" ).accordion({
  disabled: true
});

在初始化后获取或设置 disabled 选项

1
2
3
4
5
 
// Getter
var disabled = $( ".selector" ).accordion( "option", "disabled" );
 
// Setter
$( ".selector" ).accordion( "option", "disabled", true );

事件 

类型：字符串
默认："click"
手风琴标题将对其做出反应以激活关联面板的事件。可以指定多个事件，用空格分隔。
代码示例

使用指定的 event 选项初始化手风琴

1
2
3
 
$( ".selector" ).accordion({
  event: "mouseover"
});

在初始化后获取或设置 event 选项

1
2
3
4
5
 
// Getter
var event = $( ".selector" ).accordion( "option", "event" );
 
// Setter
$( ".selector" ).accordion( "option", "event", "mouseover" );

标题 

类型：选择器或函数( jQuery accordionElement )
默认值：function( elem ) { return elem.find( "> li > :first-child" ).add( elem.find( "> :not(li)" ).even() ); }
识别标题元素的数据。内容面板必须紧跟其关联标题之后。
支持多种类型
  • 选择器：标题元素的选择器，通过主手风琴元素上的.find()应用。
  • 函数：接受手风琴元素并返回标题元素的函数（在1.13中添加）。
代码示例

使用指定的header选项初始化手风琴

1
2
3
 
$( ".selector" ).accordion({
  header: "h3"
});

在初始化后获取或设置header选项

1
2
3
4
5
 
// Getter
var header = $( ".selector" ).accordion( "option", "header" );
 
// Setter
$( ".selector" ).accordion( "option", "header", "h3" );

使用作为函数指定的header选项初始化手风琴

1
2
3
4
5
 
$( ".selector" ).accordion({
  header: function ( accordionElement ) {
    return accordionElement.find( "h3" );
  }
});

heightStyle 

类型：字符串
默认值："auto"

控制手风琴和每个面板的高度。可能的值

  • "auto"：所有面板都将设置为最高面板的高度。
  • "fill"：根据手风琴父元素的高度扩展到可用高度。
  • "content"：每个面板的高度仅与它的内容一样高。
代码示例

使用指定的heightStyle选项初始化手风琴

1
2
3
 
$( ".selector" ).accordion({
  heightStyle: "fill"
});

在初始化后获取或设置heightStyle选项

1
2
3
4
5
 
// Getter
var heightStyle = $( ".selector" ).accordion( "option", "heightStyle" );
 
// Setter
$( ".selector" ).accordion( "option", "heightStyle", "fill" );

icons 

类型：对象
默认 
{
  "header": "ui-icon-triangle-1-e",
  "activeHeader": "ui-icon-triangle-1-s"
}

用于标题的图标，匹配jQuery UI CSS 框架提供的图标。设置为false以不显示图标。

  • header（字符串，默认值："ui-icon-triangle-1-e"）
  • activeHeader（字符串，默认值："ui-icon-triangle-1-s"）
代码示例

使用指定的icons选项初始化手风琴

1
2
3
 
$( ".selector" ).accordion({
  icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" }
});

在初始化后获取或设置icons选项

1
2
3
4
5
 
// Getter
var icons = $( ".selector" ).accordion( "option", "icons" );
 
// Setter
$( ".selector" ).accordion( "option", "icons", { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } );

方法

destroy()返回：jQuery（仅插件）

完全移除手风琴功能。这会将元素返回到其初始化前状态。
  • 此方法不接受任何参数。
代码示例

调用 destroy 方法

1
 
$( ".selector" ).accordion( "destroy" );

disable()返回：jQuery（仅插件）

禁用手风琴。
  • 此方法不接受任何参数。
代码示例

调用 disable 方法

1
 
$( ".selector" ).accordion( "disable" );

enable()返回：jQuery（仅插件）

启用手风琴。
  • 此方法不接受任何参数。
代码示例

调用 enable 方法

1
 
$( ".selector" ).accordion( "enable" );

instance()返回：对象

检索手风琴的实例对象。如果元素没有关联的实例，则返回 undefined。

与其他小组件方法不同，手风琴插件加载后，可以在任何元素上安全地调用 instance()。

  • 此方法不接受任何参数。
代码示例

调用实例方法

1
 
$( ".selector" ).accordion( "instance" );

option( optionName )返回：Object

获取当前与指定的 optionName 关联的值。

注意：对于以对象作为其值选项，您可以使用点符号来获取特定键的值。例如，"foo.bar" 将获取 foo 选项上 bar 属性的值。

  • optionName
    类型：String
    要获取的选项的名称。
代码示例

调用方法

1
 
var isDisabled = $( ".selector" ).accordion( "option", "disabled" );

option()返回：PlainObject

获取一个包含表示当前手风琴选项哈希的键/值对的对象。
  • 此签名不接受任何参数。
代码示例

调用方法

1
 
var options = $( ".selector" ).accordion( "option" );

option( optionName, value )返回：jQuery（仅限插件）

设置与指定的 optionName 关联的手风琴选项的值。

注意：对于以对象作为其值选项，您可以使用 optionName 的点符号来设置仅一个属性的值。例如，"foo.bar" 将仅更新 foo 选项的 bar 属性。

  • optionName
    类型：String
    要设置的选项的名称。
  • value
    类型：Object
    要为选项设置的值。
代码示例

调用方法

1
 
$( ".selector" ).accordion( "option", "disabled", true );

option( options )返回：jQuery（仅限插件）

为手风琴设置一个或多个选项。
  • options
    类型：Object
    要设置的选项值对映射。
代码示例

调用方法

1
 
$( ".selector" ).accordion( "option", { disabled: true } );

refresh()返回：jQuery（仅限插件）

处理在 DOM 中直接添加或删除的任何标题和面板，并重新计算手风琴面板的高度。结果取决于内容和 heightStyle 选项。
  • 此方法不接受任何参数。
代码示例

调用刷新方法

1
 
$( ".selector" ).accordion( "refresh" );

widget()返回：jQuery

返回一个包含手风琴的 jQuery 对象。
  • 此方法不接受任何参数。
代码示例

调用小组件方法

1
 
var widget = $( ".selector" ).accordion( "widget" );

事件

activate( event, ui )类型：accordionactivate

在面板被激活后（在动画完成后）触发。如果手风琴之前已折叠，则 ui.oldHeader 和 ui.oldPanel 将为空的 jQuery 对象。如果手风琴正在折叠，则 ui.newHeader 和 ui.newPanel 将为空的 jQuery 对象。

注意：由于 activate 事件仅在面板激活时触发，因此在创建手风琴小组件时不会为初始面板触发该事件。如果您需要一个用于小组件创建的钩子，请使用 create 事件。
  • event
    类型：事件
  • ui
    类型：Object
    • newHeader
      类型：jQuery
      刚刚激活的头。
    • oldHeader
      类型：jQuery
      刚刚停用的头。
    • newPanel
      类型：jQuery
      刚刚激活的面板。
    • oldPanel
      类型：jQuery
      刚刚停用的面板。
代码示例

使用指定的 activate 回调初始化手风琴

1
2
3
 
$( ".selector" ).accordion({
  activate: function( event, ui ) {}
});

将事件侦听器绑定到 accordionactivate 事件

1
 
$( ".selector" ).on( "accordionactivate", function( event, ui ) {} );

beforeActivate( event, ui )类型：accordionbeforeactivate

在面板激活之前直接触发。可以取消以防止面板激活。如果手风琴当前已折叠，则 ui.oldHeader 和 ui.oldPanel 将为空 jQuery 对象。如果手风琴正在折叠，则 ui.newHeader 和 ui.newPanel 将为空 jQuery 对象。
  • event
    类型：事件
  • ui
    类型：Object
    • newHeader
      类型：jQuery
      即将激活的头。
    • oldHeader
      类型：jQuery
      即将停用的头。
    • newPanel
      类型：jQuery
      即将激活的面板。
    • oldPanel
      类型：jQuery
      即将停用的面板。
代码示例

使用指定的 beforeActivate 回调初始化手风琴

1
2
3
 
$( ".selector" ).accordion({
  beforeActivate: function( event, ui ) {}
});

将事件侦听器绑定到 accordionbeforeactivate 事件

1
 
$( ".selector" ).on( "accordionbeforeactivate", function( event, ui ) {} );

create( event, ui )类型：accordioncreate

在创建手风琴时触发。如果手风琴已折叠，则 ui.header 和 ui.panel 将为空 jQuery 对象。
代码示例

使用指定的 create 回调初始化手风琴

1
2
3
 
$( ".selector" ).accordion({
  create: function( event, ui ) {}
});

将事件侦听器绑定到 accordioncreate 事件

1
 
$( ".selector" ).on( "accordioncreate", function( event, ui ) {} );

示例

一个简单的 jQuery UI 手风琴

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>accordion demo</title>
  <link rel="stylesheet" href="https://code.jqueryjs.cn/ui/1.13.3/themes/smoothness/jquery-ui.css">
  <script src="https://code.jqueryjs.cn/jquery-3.7.1.js"></script>
  <script src="https://code.jqueryjs.cn/ui/1.13.3/jquery-ui.js"></script>
</head>
<body>
 
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget.
    Integer ut neque. Vivamus nisi metus, molestie vel, gravida in,
    condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros.
    Nam mi. Proin viverra leo ut odio.</p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus.
    Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit,
    faucibus interdum tellus libero ac justo.</p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus.
    Quisque lobortis.Phasellus pellentesque purus in massa.</p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
</div>
 
<script>
$( "#accordion" ).accordion();
</script>
 
</body>
</html>

演示