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

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

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

小部件设置

创建第一个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（拉动小部件）选项。

想要获得Axure RP更多资源、正版授权的伙伴，请咨询【客服】了解

关注慧聚IT微信公众号了解产品的最新动态及最新资讯。

标签：

来源：慧都