使选择的元素成为 Accordion 部件. 语义要求:
你的accordion容器需要按照一个元素成组的满足拥有配对的头部和内容面板的格式要求. 默认的头部是锚点, 假设结构如下:
<div id="accordion">
<div>
<a href="#">First header</a>
<div>First content</div>
</div>
<div>
<a href="#">Second header</a>
<div>Second content</div>
</div>
</div>
如果使用了其他的元素来做头部, 应使用适当的选择来作为标题, 例如. 头部: 'h3'. 内容元素必须紧接着它的头部元素.
如果您有连接到accordion内容的元素,并使用它来作为头部, 应添加一个样式使他们成为标题, 例如. 头部: 'a.header'.
程序通过激活(编号)来改变访问的内容.
accordion不允许在同一时间打开多个内容节, 做到这一点需要很大的努力. 如果你正在寻找一个允许一次打开多个内容的部件,请不要使用accordion. 通常可以写几行jQuery,就像这样:
jQuery(document).ready(function(){
$('.accordion .head').click(function() {
$(this).next().toggle();
return false;
}).next().hide();
});
或者使用动画:
jQuery(document).ready(function(){
$('.accordion .head').click(function() {
$(this).next().toggle('slow');
return false;
}).next().hide();
});
$("#accordion").accordion();
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="ui/ui.core.js"></script>
<script type="text/javascript" src="ui/ui.accordion.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#accordion").accordion();
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. 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. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
<p>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>
</div>
</div>
</body>
</html>
此事件在accordion切换时触发. 如果accordion有动画, 此事件将在动画结束后触发; 否则, 立刻触发.
$('.ui-accordion').bind('accordionchange', function(event, ui) {
ui.newHeader // jQuery object, activated header
ui.oldHeader // jQuery object, previous header
ui.newContent // jQuery object, activated content
ui.oldContent // jQuery object, previous content
});
change事件进行操作.
$('.selector').accordion({
change: function(event, ui) { ... }
});accordionchange类型来绑定change事件.
$('.selector').bind('accordionchange', function(event, ui) {
...
});完全移除accordion功能. 这将使元素返回到之前的初始化状态.
关闭 accordion.
打开 accordion.
获取或者设置accordion参数. 如果没有提供参数值则是获取.
激活Accordion内容中的一部分. index可以是选择器匹配的元素,也可以是由0开始到所有匹配的header的编号. 设置为 -1 则关闭所有 (仅当collapsible参数设置为:true).
jQuery UI Accordion插件使用jQuery UI CSS 框架的外观和风格，包括颜色和背景纹理.我们建议您使用ThemeRoller工具来创建和下载的自定义主题，很容易建立和维护.
如果有更深层次的个性化需要，有特定类别的工具ui.accordion.css样式可供参考，可以修改这些参考。这些课程是下面以高亮和粗体显示的。
Note: 注：这是一个示例accordion插件所产生的标记,而不是你应该使用的标记.创建一个accordion唯一需要的标记是
<div>
<h3><a href="#">Section 1</a></h3>
<div>
<p>Section 1 content</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>Section 2 content</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>Section 3 content</p>
</div>
</div>.