jQuery API jQuery API 中英文对照版 - jQuery在线查询手册
Accordion(settings)

Accordion(settings)

Make the selected elements Accordion widgets. ? Semantic requirements: If the structure of your container is flat with unique tags for header and content elements, eg. a definition list (dl > dt + dd), you don't have to specify any options at all. If your structure uses the same elements for header and content or uses some kind of nested structure, you have to specify the header elements, eg. via class, see the second example. Use activate(Number) to change the active content programmatically.

返回值

jQuery

参数

  • settings (Object): key/value pairs of optional settings.

Hash 选项

  • active (String|Element|jQuery|Boolean): Selector for the active element, default is the first child, set to false to display none at start
  • header (String|Element|jQuery): Selector for the header element, eg. div.title, a.head, default is the first child's tagname
  • showSpeed (String|Number): Speed for the slideIn, default is 'slow'
  • hideSpeed (String|Number): Speed for the slideOut, default is 'fast'
  • selectedClass (String): Class for active header elements, default is 'selected'

示例

说明:

Creates a Accordion from the given definition list

HTML 代码:
<dl id="list1"><dt>Header 1><dd>Content 1</dd>[...]</dl>
jQuery 代码:
$('#list1').Accordion();
说明:

Creates a Accordion from the given div structure

HTML 代码:
<div id="nav"><div><div class="title">Header 1><div>Content 1</div></div>[...]</div>
jQuery 代码:
$('#list2').Accordion({ header: 'div.title' });
说明:

Creates a Accordion from the given navigation list

HTML 代码:
<ul id="nav"> <li> <a class="head">Header 1> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2></a></li> </ul> </li> [...] </ul>
jQuery 代码:
$('#nav').Accordion({ header: 'a.head' });
说明:

Updates the #status element with the text of the selected header every time the accordion changes

jQuery 代码:
$('#accordion').Accordion().change(function(event, newHeader, oldHeader, newContent, oldContent) { $('#status').html(newHeader.text()); });