原型设计工具Axure RP新手教程（十四）：Accordion菜单

---

Axure RP是一套专门为网站或应用程序所设计的快速原型设计工具， 可以让应用网站策划人员或网站功能界面设计师更加快速方便的建立Web AP和Website的线框图、流程图、原型和规格。

免费下载Axure RP 优惠购买Axure RP

---

在本教程中，您将学习如何制作一种结构，在该结构中单击标题可以展开其下方的内容区域。

小部件设置

创建第一个Accordion项目的标题

• 打开一个新的RP文件，然后在Pages（页面）窗格中双击Page1（页面1）以在画布上将其打开。

• 将Box3小部件从Libraries（库）窗格拖到画布上。

• 在Style（样式）窗格或样式工具栏中，使用H字段将框的高度设置为50。

• 将框的文本设置为标题1。

创建第一个Accordion项目的内容

• 将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项目

创建第二个项目

• 右键单击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微信公众号???，了解产品的最新动态及最新资讯。