Accordion Widget · jQuery UI API 中文文檔 1.10

# Accordion Widget Categories: [Widgets](http://www.css88.com/jquery-ui-api/category/widgets/ "View all posts in Widgets") ## version added: 1.0 **Description:** 使一對標題和內容面板轉換成折疊面板（Accordion）。 ## QuickNav[Examples](#entry-examples) ### Options + [active](#option-active) + [animate](#option-animate) + [collapsible](#option-collapsible) + [disabled](#option-disabled) + [event](#option-event) + [header](#option-header) + [heightStyle](#option-heightStyle) + [icons](#option-icons) ### Methods + [destroy](#method-destroy) + [disable](#method-disable) + [enable](#method-enable) + [option](#method-option) + [refresh](#method-refresh) + [widget](#method-widget) ### Events + [activate](#event-activate) + [beforeActivate](#event-beforeActivate) + [create](#event-create) 你的accordion容器需要按照一個元素成組的滿足擁有配對的頭部和內容面板的格式要求： ``` <div id="accordion"> <h3>First header</h3> <div>First content panel</div> <h3>Second header</h3> <div>Second content panel</div> </div> ``` Accordions （折疊面板）支持任意的標記，但每個內容面板必須始終是其相關聯頭部之后的下一個兄弟節點。請參閱有關如何使用自定義標記結構的[`header`](#option-header)選項。面板可以通過設置 [`active`](#option-active)選項來激活。 ### 鍵盤交互(Keyboard interaction) 當焦點在標題（header）上時，下面的鍵盤命令可用： * UP/LEFT - 移動焦點到上一個標題（header）。如果在第一個標題（header）上，則移動焦點到最后一個標題（header）上。 * DOWN/RIGHT - 移動焦點到下一個標題（header）。如果在最后一個標題（header）上，則移動焦點到第一個標題（header）上。 * HOME - 移動焦點到第一個標題（header）上。 * END - 移動焦點到最后一個標題（header）上。 * SPACE/ENTER - 激活與獲得焦點的標題（header）相關的面板（panel）。當焦點在面板（panel）中時，下面的鍵盤命令可用： * CTRL+UP: 移動焦點到相關的標題（header）。 ### 主題(Theming) 折疊面板部件（Accordion Widget）使用 jQuery UI CSS 框架來定義它的外觀和感觀的樣式。如果需要使用折疊面板指定的樣式，則可以使用下面的 CSS class 名稱： ui-accordion：折疊面板的外層容器。 ui-accordion-header：折疊面板的標題。如果標題包含 icons，則標題會另外有個 ui-accordion-icons class。 ui-accordion-content：折疊面板的內容面板。折疊面板部件（Accordion Widget）使用 [jQuery UI CSS framework](/theming/css-framework/) 框架來定義它的外觀和感觀的樣式。如果需要使用折疊面板指定的樣式，則可以使用下面的 CSS class 名稱： * `ui-accordion`: 折疊面板的外層容器。 * `ui-accordion-header`: 折疊面板的標題。如果標題包含 [`icons`](#option-icons)，則標題會另外有個 `ui-accordion-icons` class。 * `ui-accordion-content`: 折疊面板的內容面板。 ### 依賴 * [UI 核心（UI Core）](/category/ui-core/) * [部件庫（Widget Factory）](/jQuery.widget/) * [特效核心（Effects Core）](/category/effects-core/) （可選的；當與 [`animate`](#option-animate)選項一起使用時） ### 其他注意事項: * 該部件要求一些功能性的 CSS，否則將無法工作。如果您創建了一個自定義的主題，請使用小部件指定的 CSS 文件作為起點。 ## 選項 ### active**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) or [Integer](http://api.jquery.com/Types/#Integer) **Default:** `0`當前打開哪一個面板。**支持多個類型：** * **Boolean**:設置 `active` 為 `false` 將折疊所有的面板。這要求 [`collapsible`](#option-collapsible) 選項必須為 `true`。 * **Integer**: 激活打開的面板索引，以零為基礎。負值則表示從最后一個面板后退選擇面板。 **Code examples:** 初始化帶有指定 `active`選項的 Accordion（折疊面板）： ``` $( ".selector" ).accordion({ active: 2 }); ``` 在初始化后，獲取或設置 `active` 選項： ``` // getter var active = $( ".selector" ).accordion( "option", "active" ); // setter $( ".selector" ).accordion( "option", "active", 2 ); ``` ### animate**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) or [Number](http://api.jquery.com/Types/#Number) or [String](http://api.jquery.com/Types/#String) or [Object](http://api.jquery.com/Types/#Object) **Default:** `{}`是否使用動畫改變面板，且如何使用動畫改變面板。**支持多個類型：** * **Boolean**:`false` 值將禁用動畫。 * **Number**: 默認 easing 動畫的持續時間，以毫秒為單位。 * **String**: 默認的持續時間要使用的 [easing](/easings/) 動畫形式名稱。 * **Object**: `easing` 和 `duration` 屬性的動畫設置。 * 上面任意的選項都可以包含 `down` 屬性。 * 當被激活的面板有一個比當前激活面板較低的指數時，發生 "Down" 動畫。 **Code examples:** 初始化帶有指定 `animate`選項的 Accordion（折疊面板）： ``` $( ".selector" ).accordion({ animate: "bounceslide" }); ``` 在初始化后，獲取或設置 `animate` 選項： ``` // getter var animate = $( ".selector" ).accordion( "option", "animate" ); // setter $( ".selector" ).accordion( "option", "animate", "bounceslide" ); ``` ### collapsible**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) **Default:** `false`所有部分是否都可以馬上關閉。允許折疊激活的部分。**Code examples:** 初始化帶有指定 `collapsible`選項的 Accordion（折疊面板）： ``` $( ".selector" ).accordion({ collapsible: true }); ``` 在初始化后，獲取或設置 `collapsible` 選項： ``` // getter var collapsible = $( ".selector" ).accordion( "option", "collapsible" ); // setter $( ".selector" ).accordion( "option", "collapsible", true ); ``` ### disabled**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) **Default:** `false`如果設置為 `true`，則禁用該 Accordion（折疊面板）。**Code examples:** 初始化帶有指定 `disabled`選項的 Accordion（折疊面板）： ``` $( ".selector" ).accordion({ disabled: true }); ``` 在初始化后，獲取或設置 `disabled` 選項： ``` // getter var disabled = $( ".selector" ).accordion( "option", "disabled" ); // setter $( ".selector" ).accordion( "option", "disabled", true ); ``` ### event**Type:** [String](http://api.jquery.com/Types/#String) **Default:** `"click"`Accordion（折疊面板）頭部會作出反應的事件，用以激活相關的面板。可以指定多個事件，用空格隔開。**Code examples:** 初始化帶有指定 `event`選項的 Accordion（折疊面板）： ``` $( ".selector" ).accordion({ event: "mouseover" }); ``` 在初始化后，獲取或設置 `event` 選項： ``` // getter var event = $( ".selector" ).accordion( "option", "event" ); // setter $( ".selector" ).accordion( "option", "event", "mouseover" ); ``` ### header**Type:** [Selector](http://api.jquery.com/Types/#Selector) **Default:** `"> li > :first-child,> :not(li):even"` 標題元素的選擇器，通過主要 accordion 元素上的 `.find()` 進行應用。內容面板必須是緊跟在與其相關的標題后的同級元素。 **Code examples:** 初始化帶有指定 `header`選項的 Accordion（折疊面板）： ``` $( ".selector" ).accordion({ header: "h3" }); ``` 在初始化后，獲取或設置 `header` 選項： ``` // getter var header = $( ".selector" ).accordion( "option", "header" ); // setter $( ".selector" ).accordion( "option", "header", "h3" ); ``` ### heightStyle**Type:** [String](http://api.jquery.com/Types/#String) **Default:** `"auto"` 控制 Accordion（折疊面板）和每個面板的高度。可能的值： * `"auto"`: 所有的面板將會被設置為最高的面板的高度。 * `"fill"`: 基于 accordion 的父元素的高度，擴展到可用的高度。 * `"content"`: 每個面板的高度取決于它的內容。 **Code examples:** 初始化帶有指定 `heightStyle`選項的 Accordion（折疊面板）： ``` $( ".selector" ).accordion({ heightStyle: "fill" }); ``` 在初始化后，獲取或設置 `heightStyle` 選項： ``` // getter var heightStyle = $( ".selector" ).accordion( "option", "heightStyle" ); // setter $( ".selector" ).accordion( "option", "heightStyle", "fill" ); ``` ### icons**Type:** [Object](http://api.jquery.com/Types/#Object) **Default:** `{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }` 標題要使用的圖標，與 [jQuery UI CSS 框架提供的圖標（Icons）](/theming/icons/) 匹配。設置為 false 則不顯示圖標。 * header (string, 默認值： "ui-icon-triangle-1-e") * activeHeader (string, 默認值： "ui-icon-triangle-1-s") **Code examples:** 初始化帶有指定 `icons`選項的 Accordion（折疊面板）： ``` $( ".selector" ).accordion({ icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } }); ``` 在初始化后，獲取或設置 `icons` 選項： ``` // getter var icons = $( ".selector" ).accordion( "option", "icons" ); // setter $( ".selector" ).accordion( "option", "icons", { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } ); ``` ## Methods ### destroy()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/)) 完全移除 accordion 功能。這會把元素返回到它的預初始化狀態。 * 該方法不接受任何參數。 **Code examples:** 調用 destroy 方法： ``` $( ".selector" ).accordion( "destroy" ); ``` ### disable()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/)) 禁用 accordion。 * 該方法不接受任何參數。 **Code examples:** 調用 disable 方法： ``` $( ".selector" ).accordion( "disable" ); ``` ### enable()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/)) 啟用 accordion。 * 該方法不接受任何參數。 **Code examples:** 調用 enable 方法： ``` $( ".selector" ).accordion( "enable" ); ``` ### option( optionName )Returns: [Object](http://api.jquery.com/Types/#Object) 獲取當前與指定的 `optionName` 關聯的值。 * **optionName**Type: [String](http://api.jquery.com/Types/#String)要獲取值的選項的名稱。 **Code examples:** 調用該方法： ``` var isDisabled = $( ".selector" ).accordion( "option", "disabled" ); ``` ### option()Returns: [PlainObject](http://api.jquery.com/Types/#PlainObject) 獲取一個包含鍵/值對的對象，鍵/值對表示當前 accordion 選項哈希。 * 該方法不接受任何參數。 **Code examples:** 調用該方法： ``` var options = $( ".selector" ).accordion( "option" ); ``` ### option( optionName, value )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/)) 設置與指定的 `optionName` 關聯的 accordion 選項的值。 * **optionName**Type: [String](http://api.jquery.com/Types/#String)要設置的選項的名稱。 * **value**Type: [Object](http://api.jquery.com/Types/#Object)要為選項設置的值。 **Code examples:** 調用該方法： ``` $( ".selector" ).accordion( "option", "disabled", true ); ``` ### option( options )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/)) 為 accordion 設置一個或多個選項。 * **options**Type: [Object](http://api.jquery.com/Types/#Object)要設置的 option-value 對。 **Code examples:** 調用該方法： ``` $( ".selector" ).accordion( "option", { disabled: true } ); ``` ### refresh()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/)) 處理任何在 DOM 中直接添加或移除的標題和面板，并重新計算 accordion 的高度。結果取決于內容和 [`heightStyle`](#option-heightStyle) 選項。 * 該方法不接受任何參數。 **Code examples:** 調用 refresh 方法： ``` $( ".selector" ).accordion( "refresh" ); ``` ### widget()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) 返回一個包含 accordion 的 `jQuery` 對象。 * 該方法不接受任何參數。 **Code examples:** 調用 widget 方法： ``` var widget = $( ".selector" ).accordion( "widget" ); ``` ## Events ### activate( event, ui )Type: `accordionactivate` 面板被激活后觸發（在動畫完成之后）。如果 accordion 之前是折疊的，則 `ui.oldHeader` 和 `ui.oldPanel` 將是空的 jQuery 對象。如果 accordion 正在折疊，則 `ui.newHeader` 和 `ui.newPanel` 將是空的 jQuery 對象。 **注意：** 由于 `activate` 事件只有在面板激活時才能觸發，當創建 accordion 部件時，最初的面板不會觸發該事件。如果您需要一個用于部件創建的鉤，請使用 [`create`](#event-create) 事件。 * **event**Type: [Event](http://api.jquery.com/Types/#Event) * **ui**Type: [Object](http://api.jquery.com/Types/#Object) * **newHeader**Type: [jQuery](http://api.jquery.com/Types/#jQuery)剛被激活的標題。 * **oldHeader**Type: [jQuery](http://api.jquery.com/Types/#jQuery)剛被取消激活的標題。 * **newPanel**Type: [jQuery](http://api.jquery.com/Types/#jQuery)剛被激活的面板。 * **oldPanel**Type: [jQuery](http://api.jquery.com/Types/#jQuery)剛被取消激活的面板。 **Code examples:** 初始化帶有指定 activate 回調的 accordion： ``` $( ".selector" ).accordion({ activate: function( event, ui ) {} }); ``` 綁定一個事件監聽器到 accordionactivate 事件: ``` $( ".selector" ).on( "accordionactivate", function( event, ui ) {} ); ``` ### beforeActivate( event, ui )Type: `accordionbeforeactivate` 面板被激活前直接觸發。可以取消以防止面板被激活。如果 accordion 當前是折疊的，則 `ui.oldHeader` 和 `ui.oldPanel` 將是空的 jQuery 對象。如果 accordion 正在折疊，則 `ui.newHeader` 和 `ui.newPanel` 將是空的 jQuery 對象。 * **event**Type: [Event](http://api.jquery.com/Types/#Event) * **ui**Type: [Object](http://api.jquery.com/Types/#Object) * **newHeader**Type: [jQuery](http://api.jquery.com/Types/#jQuery)將被激活的標題。 * **oldHeader**Type: [jQuery](http://api.jquery.com/Types/#jQuery)將被取消激活的標題。 * **newPanel**Type: [jQuery](http://api.jquery.com/Types/#jQuery)將被激活的面板。 * **oldPanel**Type: [jQuery](http://api.jquery.com/Types/#jQuery)將被取消激活的面板。 **Code examples:** 初始化帶有指定 beforeActivate 回調的 accordion： ``` $( ".selector" ).accordion({ beforeActivate: function( event, ui ) {} }); ``` 綁定一個事件監聽器到 accordionbeforeactivate 事件: ``` $( ".selector" ).on( "accordionbeforeactivate", function( event, ui ) {} ); ``` ### create( event, ui )Type: `accordioncreate` 當創建 accordion 時觸發。如果 accordion 是折疊的，`ui.header` 和 `ui.panel` 將是空的 jQuery 對象。 * **event**Type: [Event](http://api.jquery.com/Types/#Event) * **ui**Type: [Object](http://api.jquery.com/Types/#Object) * **header**Type: [jQuery](http://api.jquery.com/Types/#jQuery)激活的標題。 * **panel**Type: [jQuery](http://api.jquery.com/Types/#jQuery)激活的面板。 **Code examples:** 初始化帶有指定 create 回調的 accordion： ``` $( ".selector" ).accordion({ create: function( event, ui ) {} }); ``` 綁定一個事件監聽器到 accordioncreate 事件: ``` $( ".selector" ).on( "accordioncreate", function( event, ui ) {} ); ``` ## Example: #### 一個簡單的 jQuery UI 折疊面板（Accordion）。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>accordion demo</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.10.4/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> ```