選取「插入＞Spry＞Spry 折疊式」。
上次更新時間
2021年4月29日
註解：
在 Dreamweaver CC 和更新版本中，Spry Widget 已由 jQuery Widget 所取代。雖然您仍可修改頁面上現有的 Spry Widget，但無法加入新的 Spry Widget。
關於折疊式 Widget
折疊式 Widget 是一組可收合的面板，能以很小的空間儲存大量的內容。網頁瀏覽者可以按一下面板標籤，隱藏或顯示折疊式結構所儲存的內容。瀏覽者只要按下不同的標籤，就能展開或收合折疊式面板。折疊式結構同時間只能開啟並顯示一個內容面板。下列範例顯示折疊式 Widget 及展開第一個面板的情形：
A. 折疊式面板索引標籤 B. 折疊式面板內容 C. 折疊式面板 (開啟)
折疊式 Widget 的預設 HTML 是由外部的 div 標籤所組成，而此標籤包含了所有面板、代表每個面板的 div 標籤，以及每個面板標籤內的頁首 div 和內容 div。折疊式 Widget 可以包含任意數量的個別面板。折疊式 Widget 的 HTML 也包含位於文件頁首和折疊式 HTML 標記後面的 Script 標籤。
如需折疊式 Widget 運作方式的詳細說明，包括折疊式 Widget 程式碼的完整分析，請參閱 www.adobe.com/go/learn_dw_spryaccordion_tw。
如需折疊式 Widget 的教學課程，請參閱 www.adobe.com/go/vid0167_tw。
插入和編輯折疊式 Widget
插入折疊式 Widget
註解：
您也可以使用「插入」面板中的「Spry」類別來插入折疊式 Widget。
新增面板至折疊式 Widget
-
在「文件」視窗中選取折疊式 Widget。
-
按一下「屬性」檢視窗 (「視窗 ＞ 屬性」) 中的面板加號 (+) 按鈕。
-
(選擇性) 如果您要變更面板名稱，請在「設計」檢視中選取面板文字並加以變更。
從折疊式 Widget 刪除面板
-
在「文件」視窗中選取折疊式 Widget。
-
在「屬性」檢視窗 (「視窗 ＞ 屬性」) 的「面板」選單中，選取要刪除的面板名稱，並按一下減號 (-) 按鈕。
開啟面板以進行編輯
-
請執行下列其中一項作業：
將滑鼠指標移到要以「設計」檢視開啟的面板標籤上方，並按一下標籤右側的眼睛圖示。
在「文件」視窗中選取折疊式 Widget，然後在「屬性」檢視窗 (「視窗 > 屬性」) 的「面板」選單中，按一下要編輯的面板名稱。
變更面板順序
-
在「文件」視窗中選取折疊式 Widget。
-
在「屬性」檢視窗 (「視窗 ＞ 屬性」) 中，選取您要移動的折疊式面板名稱。
-
按一下向上或向下箭頭，將面板向上或向下移動。
自訂折疊式 Widget
「屬性」檢視窗可讓您對折疊式 Widget 進行簡單的編輯，但不支援自訂的樣式設計工作。您可以變更折疊式 Widget 的 CSS 規則，並依照您所喜愛的樣式建立折疊式 Widget。
如需更改折疊式 Widget 顏色的快速參考資料，請參閱 David Powers 的 Spry 標籤面板、折疊式控制項和可收合面板樣式設計的快速指南。
如需樣式設計工作的進階清單，請參閱 www.adobe.com/go/learn_dw_spryaccordion_custom_tw。
下列主題中的所有 CSS 規則都是指 SpryAccordion.css 檔案中的預設規則。每當您建立 Spry 折疊式 Widget 時，Dreamweaver 都會將 SpryAccordion.css 檔案儲存在網站的 SpryAssets 資料夾中。這個檔案也包含 Widget 所適用各種樣式的註解資訊，方便您查詢相關資訊。
註解：
您可以輕鬆地在 CSS 檔案中直接編輯折疊式 Widget 的規則，也可以使用「CSS 樣式」面板來編輯折疊式的 CSS。「CSS 樣式」面板可以協助您尋找指定給 Widget 不同部分的 CSS 類別，在您使用面板的「目前」模式時，特別有用。
設計折疊式 Widget 文字的樣式
您可以設定整個折疊式 Widget 容器的屬性，或是個別設定 Widget 組件的屬性，藉此設計折疊式 Widget 文字的樣式。
-
若要變更折疊式 Widget 的文字樣式，請使用下表找出適合的 CSS 規則，然後新增您自己的文字樣式屬性和值：
要變更的文字
相關的 CSS 規則
要新增的屬性和值範例
整個折疊式中的文字 (包括標籤和內容面板)
.Accordion 或 .AccordionPanel font: Arial; font-size:medium;
僅折疊式面板標籤中的文字
.AccordionPanelTab font: Arial; font-size:medium;
僅折疊式內容面板中的文字
.AccordionPanelContent font: Arial; font-size:medium;
變更折疊式 Widget 背景顏色
-
若要變更折疊式 Widget 不同部分的背景顏色，請使用下表找出適合的 CSS 規則，然後新增或變更背景顏色屬性和值：
要變更的 Widget 部分
相關的 CSS 規則
要新增或變更的屬性和值範例
折疊式面板標籤的背景顏色
.AccordionPanelTab background-color: #CCCCCC; (這是預設值)
折疊式內容面板的背景顏色
.AccordionPanelContent background-color: #CCCCCC;
開啟的折疊式面板的背景顏色
.AccordionPanelOpen .AccordionPanelTab background-color: #EEEEEE; (這是預設值)
游標停留在上面時的面板標籤背景顏色
.AccordionPanelTabHover color: #555555; (這是預設值)
游標停留在上面時開啟的面板標籤的背景顏色
.AccordionPanelOpen .AccordionPanelTabHover color: #555555; (這是預設值)
限制折疊式結構寬度
根據預設，折疊式 Widget 會展開至所有可用空間。不過，您只要設定折疊式容器的寬度屬性，就可以限制折疊式 Widget 的寬度。
-
開啟 SpryAccordion.css 檔案，找出 .Accordion CSS 規則。這項規則定義了折疊式 Widget 主要容器元素的屬性。註解：
您也可以選取折疊式 Widget，然後在「CSS 樣式」面板 (「視窗 > CSS 樣式」) 中進行搜尋，以找出這項規則。請確認面板已設定為「目前」模式。
-
為規則新增寬度屬性和值，例如 width: 300px;。
