Jquery Accordion 折叠面板

属性 类型 默认值

active Boolean/Number/jQuery/Selector/Element 第一个面板

设定默认显示的面板。设置为 false 时默认不显示面板，需 collapsible 属性设置为 true。

代码示例

创建实例时设置属性值

$(".class").accordion({active:2});

实例化后得到属性值

var active = $("#id").accordion("option","active");

实例化后设置属性值

$("#id").accordion("option","active",2);

animated Boolean/String "slide"

设定面板折叠动画效果。设置为 false 禁止动画效果。内置"slide"、"easeslide"、"bounceslide"。更多效果需加载 Effects Core。

代码示例

创建实例时设置属性值

$(".class").accordion({animated:"easeslide"});

实例化后得到属性值

var animated = $("#id").accordion("option","animated");

实例化后设置属性值

$("#id").accordion("option","animated","easeslide");

autoHeight Boolean true

是否设定最高面板高度为其它所有面板高度。

代码示例

创建实例时设置属性值

$(".class").accordion({autoHeight:false});

实例化后得到属性值

var autoHeight = $("#id").accordion("option","autoHeight");

实例化后设置属性值

$("#id").accordion("option","autoHeight",false);

clearStyle Boolean false

设定为 true 时，折叠面板后自动清除 height 和 overflow 样式。适用于动态加载面板内容。与 autoHeight 属性不兼容。

代码示例

创建实例时设置属性值

$(".class").accordion({clearStyle:true});

实例化后得到属性值

var clearStyle = $("#id").accordion("option","clearStyle");

实例化后设置属性值

$("#id").accordion("option","clearStyle",true);

collapsible Boolean false

是否允许折叠全部面板。设为 false 时必须显示一个面板。

代码示例

创建实例时设置属性值

$(".class").accordion({collapsible:true});

实例化后得到属性值

var collapsible = $("#id").accordion("option","collapsible");

实例化后设置属性值

$("#id").accordion("option","collapsible",true);

event String "click"

设置切换面板的事件。

代码示例

创建实例时设置属性值

$(".class").accordion({event:"mouseover"});

实例化后得到属性值

var event = $("#id").accordion("option","event");

实例化后设置属性值

$("#id").accordion("option","event","mouseover");

fillSpace Boolean false

设置为 true 时，高度自动填充满父元素。将覆盖 autoHeight 属性。

代码示例

创建实例时设置属性值

$(".class").accordion({fillSpace:true});

实例化后得到属性值

var fillSpace = $("#id").accordion("option","fillSpace");

实例化后设置属性值

$("#id").accordion("option","fillSpace",true);

header Selector/jQuery "> li > :first-child,> :not(li):even"

设置面板标题元素。

代码示例

创建实例时设置属性值

$(".class").accordion({header:"> div > h3"});

实例化后得到属性值

var header = $("#id").accordion("option","header");

实例化后设置属性值

$("#id").accordion("option","header","> div > h3");

icons Object { "header":"ui-icon-triangle-1-e","headerSelected":"ui-icon-triangle-1-s"}

设置面板标题图标。header：折叠时图标；headerSelected：打开时图标。

代码示例

创建实例时设置属性值

$(".class").accordion({icons:{ "header":"ui-icon-plus","headerSelected":"ui-icon-minus"}});

实例化后得到属性值

var icons = $("#id").accordion("option","icons");

实例化后设置属性值

$("#id").accordion("option","icons",{ "header":"ui-icon-plus","headerSelected":"ui-icon-minus"});

navigation Boolean false

设置为 true 时，自动打开 href 属性与 location.href 相同的面板。用于使用 URL 保持面板打开状态。

代码示例

创建实例时设置属性值

$(".class").accordion({navigation:true});

实例化后得到属性值

var navigation = $("#id").accordion("option","navigation");

实例化后设置属性值

$("#id").accordion("option","navigation",true);

navigationFilter Function

自定义 navigation 属性检查函数。

代码示例

创建实例时设置属性值

$(".class").accordion({navigationFilter:false});

实例化后得到属性值

var navigationFilter = $("#id").accordion("option","navigationFilter");

实例化后设置属性值

$("#id").accordion("option","navigationFilter",false);