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);