axure中级继三级菜单练习：如何设置选项联动？

2021-03-0710:34:47原型设计Comments2,064 views字数 4022阅读模式

提示1：本篇教程可能不太适合新手，以及不了解中继器、全局变量、系统变量等使用的…新手文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

提示2：文字其实不多，截图太多，所以看上去很长，也可直接翻到末尾查看所有的用例，其实并不多文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

之前有介绍过使用中继器制作2级菜单，可以看出，使用中继器完成类似的多重复列表时比较便捷，至少比在N层动态面板来回切不断复制要轻松一些。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

这回我们尝试换一个思路来完成3级菜单。该思路两样适用于制作2级菜单，甚至更多层级的菜单。同时，对于后期需要调整菜单结构，添加新的菜单等，都比较方便。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

先看效果(以省、市、区三级联动为蓝本)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

写在前面：原型只是过渡型产物，不是最终产品，实际工作过程中没必要死磕，能做到表述清晰即可，最好的原型是沟通，是沟通，是沟通！！！本文更多的是站在兴趣爱好，及加强基础逻辑能力角度，做了一些简单的思考及尝试，与大家一起分享共同交流。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

以下为制作过程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

概况文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

指导思路：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

菜单展示 —— 父级菜单永远排在子级菜单前面 —— 排序文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

菜单展开/收缩 —— 筛选/取消筛选文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

所需元件：中继器 * 1文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

该中继器下面的元件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

矩形 * 1 —— 命名为“区域”文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

icon * 1 —— 展开/收缩图标 —— 命名为“展开标识”文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

中继器外部的元件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

矩形 * 2 —— a、控制展开动作；b、控制收缩动作文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

涉及交互事件(用例)：中继器用例：载入时文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

中继器用例：每项加载时文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

矩形用例：鼠标单击时文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

涉及动作：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

添加排序(中继器)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

添加筛选(中继器)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

更新行(中继器)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

设置文本文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

设置尺寸文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

隐藏(元件)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

设置选中状态文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

旋转(元件)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

触发事件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

涉及函数及变量全局变量 * 2- 命名为：ID1、ID2，默认值为空。用于记录被点击菜单的父级菜单、父父级菜单文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

Target：目标元件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

.width：元件宽度文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

.height：元件高度文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

涉及动画：无(最好不要动画)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

注意操作：用例的判断条件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

素材制作文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

1、拖入一个中继器。设置中继器的行距为10(单击中继器，右侧样式最下选择“间距”进行设置)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

双击中继器，进入中继器内部设置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

1-1、拖入一个矩形，命名为“区域”设置(默认)宽高为：300*40；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

设置(默认)线段颜色为F2F2F2；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

右键矩形“区域”，进入交互样式，文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

设置鼠标悬停时填充颜色为F2F2F2；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

鼠标按下时填充颜色为E4E4E4；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

选中时填充颜色为CCCCCC文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

1-2、拖入icon – 向右单角符 ，命名为“展开标识”设置填充颜色为999999文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

2、拖入矩形，命名为“展开”，样式随便设置 —— 后面的触发事件需要用到，样式不重要文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

3、拖入矩形，命名为“收缩”，样式随便设置 —— 后面的触发事件需要用到，样式不重要文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

设置好之后大概长下面这个样子文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？注意：预览效果中应将元件“展开”“收缩”隐藏，用户不需要看到文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

中继器数据文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

按以下属性表规格为中继器填入数据文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？(图1)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

字段说明：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

1、type – 菜单类型，用于区分层级值域：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

1：一级菜单 —— 此处指“省”文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

2：二级菜单 —— 此处指“市”文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

3：三级菜单 —— 此处指“区”文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

2、ID – 菜单ID值，此处主要用于排序，需要按命名规则进行命名命名规则：由ID1、ID2、ID3组合而成的至少6位正整数文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

ID1(1位)+ID2(2位)+ID3(3位)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

例如：ID1为1，ID2为2，ID3为3，则ID值为102003文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

—— 中继器加载时进行一次排序，就可以保证按照想要的树结构来展现了文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

3、ID1、ID2、ID3ID1：一级菜单编号，不可为0文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

ID2：二级菜单编号，可为0，一级菜单该值为0文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

ID3：三级菜单编辑，可为0，一二级菜单该值为0文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

4、name – 菜单名称文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

5、eye – 菜单是隐藏，或是否可见。作为后续中继器筛选动作的筛选条件值域：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

1：显示文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

0：隐藏文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

默认情况下除一级菜单之外的菜单都是被折叠的(即不可见)。所以，示例中的两个一级菜单：江西、浙江，基(默认)eye值为1文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

6、xuan – 菜单是展开情况。用于控制元件“展开标识”的旋转情况、及记录当前菜单的展开状态文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

值域：1：展开文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

0：未展开文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

可延展：1、如果需要更多的菜单(省市区)，按照该形式继续添加即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

2、如果需要改为其他的类型(比如商品三级分类)，修改一下name值即可文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

交互设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

1、中继器部分文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

1-1、中继器加载数据 —— 用例：每项加载时文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

1-1-1、赋值及调整菜单样式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

第1个动作：设置元件“区域”上的文字等于中继器的属性name值文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？(图2)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

第2个动作：设置(调整)元件“区域”的尺寸 – 不同类型的菜单样式上做区别文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？(图3)说明：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

[[ – 20 * ( – 1) ]] ：根据菜单的类型设置其宽度，即子菜单相较父级菜单宽度小20像素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

[[]]：高度不变，即所有菜单的高度都相同文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

锚点，选择右侧，目的是为了右边对齐 —— 可以根据实际情况自行调整文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

1-1-2、三级目录不需要“展开标识” – 三级目录不再再展开，所以不需要文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

设置判断条件：当菜单类型为三级菜单时文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？(图4)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

隐藏“展开标识”文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？(图5)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

1-1-3、展开/未展开样式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

a、展开时文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

判断条件，[[]]等于1，代表是展开状态文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

(图6)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

第1个动作：设置元件“区域”为选中状态 —— 进而其选中的样式就体现出来了文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

(图7)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

第2个动作：设置元件“展开标识”由原来的向右，变成向下 —— 围绕元件中心旋转到90度文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？(图8)注意：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

a1、此处使用的是绝对角度，不是相对角度。原因：相对角度容易出错文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

a2、不要使用动画。原因：中继器的筛选、排序、更新等，都会将所有的项都重新加载一遍，所以执行以上动作之后，可能会出现N个元件同时都在旋转的情况文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

a3、结合前2点，所以方向是顺时针或逆时针都可以文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

b、未展开时文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

判断条件，[[]]等于0，代表是未展开状态文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

(图9)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

第1个动作：设置元件“区域”为未选中状态 —— 进而就恢复其默认样式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？(图10)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

第2个动作：设置元件“展开标识”恢复默认状态 – 旋转角度为0文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？(图11)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

注意：1、1-1-3的两个用例，其关系为：if…else if，即，最多只执行其中一个用例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

2、1-1-1、1-1-2、1-1-3之间是平行的，依次都会执行文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

设置好之后的情况如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？(图12)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

1-2、中继器载入时，添加排序及筛选文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

第1个动作：添加排序 – 按ID值升级排列 —— 结合ID的命名规则，可保证按预期的顺序显示菜单文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？(图13)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

第2个动作：添加筛选 – 只显示状态为显示(eye=1)的的项文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？(图14)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

设置好之后的情况如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？(图15)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

以上步骤完成之后先看一下预览效果，应如下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？(图16)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

2、中继器内部操作 – 元件“区域”的交互文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

我们希望在点击元件“区域”时，自动展开/收缩其子菜单。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

细分下来为a、无子菜单时，即，点击的是三级菜单，什么都不做文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

b、点击的是二级菜单时，展开/收缩其下的三级菜单文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

c、点击的是一级菜单时，展开其下的二级菜单(不展开三级菜单)；或 收缩其下所有的二级菜单及三级菜单文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

按以上思路，进行用例设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

2-1、记录上级菜单，给全局变量ID1、ID2赋值文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？(图17)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

2-2、根据当前展开状态，执行展开或收缩动作文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

2-2-1、展开文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

第1步，添加判断条件：该菜单为未展开状态，且不是三级菜单时文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？(图18)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

说明：[[]]==0：未展开状态文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

[[]]!=3：不是三级菜单文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

第2步：更新中继器(下的属性值)，动作“更新行”，设置(该行的)xuan值为1文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

(图19)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

第3步：触发展开事件 – 具体展开的用例情况，下文中会有介绍文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

(图20)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

2-2-1、收缩文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

第1步，添加判断条件：该菜单为展开状态，且不是三级菜单时文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？(图21)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

第2步：更新中继器(下的属性值)，动作“更新行”，设置(该行的)xuan值为0文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

(图22)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

第3步：触发收缩事件 – 具体收缩的用例情况，下文中会有介绍文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？(图23)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

注意：a、展开、收缩用例是最多只执行一个就够了的，所以其结构为if……else if文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

b、触发事件时，不要忘了勾选具体哪个动作(往往会点击了元件，忘了勾选哪个动作)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

3、中继器外部操作 – 元件“展开”、“收缩”的交互用例为什么不直接放到用例“每项加载时”？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

前面说过，中继器的执行原理(至少差不多是这样)，当有排序、筛选、更新、删除等动作时，会将所有的项都重新加载一遍，所以如果将对中继器的更新等动作，放在“每项加载时”很容易造成死循环，从而不产生任何效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

3-1、元件“展开”的用例设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

3-1-1、展开的是一级菜单文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

第1步，添加判断条件：全局变量ID2=0文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

—— 我们在点击“区域”元件时，会先对ID1、ID2进行赋值操作文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

(图24)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

第2步：执行展开动作 – 通过更新行值实现(然后会自动触发中继器“载入时”的动作)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？(图25)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

说明：[[(item.ID1 == ID1)&&( == ‘2’)]]：定位到该一级菜单下的所有二级菜单。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

eye = 1，将符合匹配条件的项的eye值更新为1，即显示状态文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

3-1-2、展开的是二级菜单文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

第1步，配置判断条件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

因为与3-1-1为if…else if关系，所以此处的判断条件可以写为 else if true文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

操作方法：右键相应动作(示例为“鼠标单击时”)选择“添加用例”即可，默认条件即为else if true文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？(图26)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

第2步，执行展开动作 – 通过更新行值实现文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

(图27)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

说明：与一级菜单的菜单匹配条件有区别，匹配条件公式为：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

[[(item.ID1 == ID1)&&(item.ID2 == ID2)&&( == ‘3’)]]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

设置好之后的情况如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？(图28)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

3-2、元件“收缩”的用例设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

3-2-1、收缩一级菜单文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？(图29)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

说明：[[(item.ID1 == ID1) && ( != 1)]]：定位到该一级菜单下的所有二、三级菜单(不能包括自己)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

eye = 0，将符合匹配条件的项的eye值更新为0，即隐藏状态文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

xuan = 0，将符合匹配条件的项的xuan值更新为0，即不展开状态(父级菜单收缩后，所有的子菜单都为收缩状态)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

3-2-1、收缩二级菜单文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？(图30)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

说明：与一级菜单的菜单匹配条件有区别，匹配条件公式为：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

[[(item.ID1 == ID1)&&(item.ID2 == ID2)&&( == 3)]]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

定位到该二级菜单下的所有三级菜单(不能包括自己)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

设置好之后的情况如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？(图31)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

以上，所有的交互都设计完成，再核对一下用例情况文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

axure中级继三级菜单练习：如何设置选项联动？(图32)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

最后，因为元件“展开”“收缩”不需要在前台显示，所以将这两个元件隐藏即可(不影响交互效果)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21059.html

  • 本站内容整理自互联网，仅提供信息存储空间服务，以方便学习之用。如对文章、图片、字体等版权有疑问，请在下方留言，管理员看到后，将第一时间进行处理。
  • 转载请务必保留本文链接：https://www.cainiaoxueyuan.com/yuanxing/21059.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定