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

免費下載Axure RP 優惠購買Axure RP

在本教程中，您將學習如何制作一種結構，在該結構中單擊標題可以展開其下方的內容區域。

小部件設置

創建第一個Accordion項目的標題

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

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

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

• 將框的文本設置為標題1。

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

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

• 再次右鍵單擊該框，然后選擇Create Dynamic Panel（創建動態面板）。

• 通過選擇新的動態面板并單擊Style（樣式）窗格或樣式工具欄中的Hidden（隱藏）圖標來隱藏它。

分組標題和內容小部件

• 選擇標題1框和動態面板，然后單擊界面頂部的Group（組）以將它們放置在小部件組中

• 為組命名為Accordion Item 1。

單擊標題時切換內容的可見性

• 選擇標題1框，然后在Interactions（交互）窗格中單擊Click（單擊）或Tap（點擊）→Set Visibility（設置可見性）。

• 在Target（目標）下拉列表中選擇動態面板，然后在其下方選擇Toggle（切換）。

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

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

創建第二個項目

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

• 重命名新的小部件組Accordion Item 2，并將其標題框中的文本設置為標題2。

• 放置Accordion Item2，使標題2框位于標題1框下方。

• 重復這些步驟以創建第三個小部件組。 將該組命名為Accordion Item 3，并將其標題框的文本設置為標題3。將其放置在標題2框下方。

預覽互動

預覽頁面，然后單擊Accordion標題以展開和折疊其相應的內容動態面板。

附加信息和提示

展開新項目時折疊未清項目

如果您一次只想擴展一個Accordion項目，則向每個標題框的Click或Tap事件添加另一個Show / Hide操作，以隱藏除其自身之外的每個內容動態面板。 例如，標題1框將隱藏Accordion Item 2和“Accordion Item 3組中的動態面板。

注意：隱藏動態面板時，不要忘記選擇Pull Widgets（拉動小部件）選項。

關注慧聚IT微信公眾號???，了解產品的最新動態及最新資訊。