使用axure实现点击下拉列表框中任意一个选项时,触发(联动)该选项需要查看的内容,隐藏其他内容

1.在一个新建的项目模型里,在图形库选中下拉列表框,拖到空白处,如下所示:

使用axure实现点击下拉列表框中任意一个选项时,触发(联动)该选项需要查看的内容,隐藏其他内容

 2.编辑列表选项:双击下拉列表框,为列表框添加相应的选项(可单个添加也可选择一次性添加),这里举例子以网点为例,其他子选项添加方式类似,效果如下:

使用axure实现点击下拉列表框中任意一个选项时,触发(联动)该选项需要查看的内容,隐藏其他内容

 使用axure实现点击下拉列表框中任意一个选项时,触发(联动)该选项需要查看的内容,隐藏其他内容

 预览查看效果,下拉框中添加选项成功。(如果想要使得选项居中,在添加选项的时候可以使用空格)

3.要使得我们点击下拉框中的某个子选项时,在空白位置显示出相应的内容,首先我们需要使用一个动态面板,添加方式:将动态面板拖到空白区域,为了便于后面交互用例的设置,这里我们常常会以不同的命名区分,以“网点”这个子选项为例,其他选项类似,如下所示:

使用axure实现点击下拉列表框中任意一个选项时,触发(联动)该选项需要查看的内容,隐藏其他内容

接下来,我们需要在动态面板中添加新的内容,在右下角的位置,双击State1,会自动跳转到动态面板添加图形的界面,然后只需要将你想要添加的图形拖到动态面板的区域内即可,这里我们以表格为例,操作步骤及效果如下:

使用axure实现点击下拉列表框中任意一个选项时,触发(联动)该选项需要查看的内容,隐藏其他内容

点击State查看添加效果:

使用axure实现点击下拉列表框中任意一个选项时,触发(联动)该选项需要查看的内容,隐藏其他内容

4. 准备工作基本完成,接下来我们需要将下拉复选框中的选项与之对应的内容关联起来,这时候我们需要使用“交互”中的“添加用例”来实现,

a.选中复选框,点击添加用例,再双击case1,在弹出的界面选中对应的选项,操作如下:

使用axure实现点击下拉列表框中任意一个选项时,触发(联动)该选项需要查看的内容,隐藏其他内容

b.点击元件中的“显示/隐藏元件”,使得当选中复选框中的某一个子选项时,会只显示对应的内容,其他子选项的内容会隐藏起来,具体操作如下:

使用axure实现点击下拉列表框中任意一个选项时,触发(联动)该选项需要查看的内容,隐藏其他内容

按照以上方法,其他子选项也是类似操作,主界面如下:

使用axure实现点击下拉列表框中任意一个选项时,触发(联动)该选项需要查看的内容,隐藏其他内容

由于初始状态的时候,我们没有点击操作,而三个选项的内容也都没有隐藏起来,所以在预览的时候,看到的初始界面三个表都会显示,为了不显示,我们可以选中三个动态面板单击右键,选中“设为隐藏”,即可实现初始界面不显示,使用快捷键F5预览效果如下:

a.未隐藏之前:

使用axure实现点击下拉列表框中任意一个选项时,触发(联动)该选项需要查看的内容,隐藏其他内容

b.隐藏之后,效果如下:

使用axure实现点击下拉列表框中任意一个选项时,触发(联动)该选项需要查看的内容,隐藏其他内容

当选择复选框中的一个选项时,会显示相应的内容,以选择“片区”为例,效果如下:

使用axure实现点击下拉列表框中任意一个选项时,触发(联动)该选项需要查看的内容,隐藏其他内容

至此基本实现了当点击下拉列表框中任意一个选项时,会触发(联动)该选项需要查看的内容,隐藏其他内容,但还有一个待解决的问题,第一次点击初始界面的复选框中默认的子选项时,不会出现该子选项相应的内容,但是先点击非默认子选项之后再去点击初始默认的子选项会出现相应内容。

初入职场的需求分析菜鸟,还有很多需要学习的地方,如果有不足之处,希望大家指点出来。