原型設(shè)計(jì)工具Axure RP新手教程（十四）：Accordion菜單

---

Axure RP是一套專門為網(wǎng)站或應(yīng)用程序所設(shè)計(jì)的快速原型設(shè)計(jì)工具， 可以讓應(yīng)用網(wǎng)站策劃人員或網(wǎng)站功能界面設(shè)計(jì)師更加快速方便的建立Web AP和Website的線框圖、流程圖、原型和規(guī)格。

免費(fèi)下載Axure RP 優(yōu)惠購(gòu)買Axure RP

---

在本教程中，您將學(xué)習(xí)如何制作一種結(jié)構(gòu)，在該結(jié)構(gòu)中單擊標(biāo)題可以展開(kāi)其下方的內(nèi)容區(qū)域。

小部件設(shè)置

創(chuàng)建第一個(gè)Accordion項(xiàng)目的標(biāo)題

• 打開(kāi)一個(gè)新的RP文件，然后在Pages（頁(yè)面）窗格中雙擊Page1（頁(yè)面1）以在畫布上將其打開(kāi)。

• 將Box3小部件從Libraries（庫(kù)）窗格拖到畫布上。

• 在Style（樣式）窗格或樣式工具欄中，使用H字段將框的高度設(shè)置為50。

• 將框的文本設(shè)置為標(biāo)題1。

創(chuàng)建第一個(gè)Accordion項(xiàng)目的內(nèi)容

• 將Box 2小部件拖到畫布上，然后將其直接放在Heading 1框下面。

• 右鍵單擊該框，然后在上下文菜單中選擇Fill with Lorem Ipsum（用Lorem Ipsum填充）以用文本填充該框。

• 再次右鍵單擊該框，然后選擇Create Dynamic Panel（創(chuàng)建動(dòng)態(tài)面板）。

• 通過(guò)選擇新的動(dòng)態(tài)面板并單擊Style（樣式）窗格或樣式工具欄中的Hidden（隱藏）圖標(biāo)來(lái)隱藏它。

分組標(biāo)題和內(nèi)容小部件

• 選擇標(biāo)題1框和動(dòng)態(tài)面板，然后單擊界面頂部的Group（組）以將它們放置在小部件組中

• 為組命名為Accordion Item 1。

單擊標(biāo)題時(shí)切換內(nèi)容的可見(jiàn)性

• 選擇標(biāo)題1框，然后在Interactions（交互）窗格中單擊Click（單擊）或Tap（點(diǎn)擊）→Set Visibility（設(shè)置可見(jiàn)性）。

• 在Target（目標(biāo)）下拉列表中選擇動(dòng)態(tài)面板，然后在其下方選擇Toggle（切換）。

• 單擊操作設(shè)置底部的More Options（更多選項(xiàng)），然后在出現(xiàn)的下拉菜單中選擇Push/Pull Widgets（推/拉小部件）。

• 保持選中下方單選按鈕，然后單擊確定以保存操作。

復(fù)制組以創(chuàng)建更多Accordion項(xiàng)目

創(chuàng)建第二個(gè)項(xiàng)目

• 右鍵單擊Accordion Item 1小部件組，然后選擇Copy（復(fù)制）。 然后，右鍵單擊畫布上的空白處，然后選擇Paste（粘貼）。

• 重命名新的小部件組Accordion Item 2，并將其標(biāo)題框中的文本設(shè)置為標(biāo)題2。

• 放置Accordion Item2，使標(biāo)題2框位于標(biāo)題1框下方。

創(chuàng)建第三個(gè)項(xiàng)目

• 重復(fù)這些步驟以創(chuàng)建第三個(gè)小部件組。 將該組命名為Accordion Item 3，并將其標(biāo)題框的文本設(shè)置為標(biāo)題3。將其放置在標(biāo)題2框下方。

預(yù)覽互動(dòng)

預(yù)覽頁(yè)面，然后單擊Accordion標(biāo)題以展開(kāi)和折疊其相應(yīng)的內(nèi)容動(dòng)態(tài)面板。

附加信息和提示

展開(kāi)新項(xiàng)目時(shí)折疊未清項(xiàng)目

如果您一次只想擴(kuò)展一個(gè)Accordion項(xiàng)目，則向每個(gè)標(biāo)題框的Click或Tap事件添加另一個(gè)Show / Hide操作，以隱藏除其自身之外的每個(gè)內(nèi)容動(dòng)態(tài)面板。 例如，標(biāo)題1框?qū)㈦[藏Accordion Item 2和“Accordion Item 3組中的動(dòng)態(tài)面板。

注意：隱藏動(dòng)態(tài)面板時(shí)，不要忘記選擇Pull Widgets（拉動(dòng)小部件）選項(xiàng)。

---

關(guān)注慧聚IT微信公眾號(hào)???，了解產(chǎn)品的最新動(dòng)態(tài)及最新資訊。