Axure 制作过滤筛选栏

先上效果图

类似美团大众点评的条件过滤筛选

说下思路

主要运用了动态面板的状态切换，“形式”、“领域”、“配置”等这种页签是动态面板，下面的弹出的菜单项也是动态面板。先说页签，页签状态我设为了“选中”和“未选中”两种。当状态为“未选中”时，点击切换为“选中”，展示该页签的下拉菜单，同时切换其他页签的状态为“未选中”并收起它对应的菜单。

制作步骤

页签

添加动态面板，设置两个状态，“选中”、“未选中”。未选中在第一行，默认未选中。做比较复杂的效果时命名很重要，因为涉及的元素多用例复杂，所以建议做的时候想好一套命名方案。

点进去分别设置未选中和选中时的样式，如下

菜单及子菜单

逐级制作菜单，第一层是一级菜单，第二层二级菜单，依次类推。依然是动态面板。

面板本身没有状态切换，其中的某个元素（菜单子项）会有下级菜单。进入State1，编辑菜单列表项


一级菜单有3个元素，“线上”，“线下”，“混合式方案”，其中“线上”“线下”又引申出二级菜单。可以拖入3个按钮，把“线上”“线下”转换为动态面板，“混合式方案”因为不涉及二级菜单不用转换。分别设置“线上”“线下”的选中未选中状态样式。这边需要注意的是整个菜单框不会涉及状态切换，只有单个菜单项会有选中和未选中状态，所以，菜单框就一个状态State1，进入State1后再添加菜单项，针对有子菜单的菜单项再分别设置“选中”“未选中”状态。


同理添加二级菜单

进入菜单框的State1，添加具体菜单项。再根据每个菜单项设置状态。

诸如以上，把页签和菜单项先建好，按照一定规则排列好（先不要调整位置，还可能涉及一些效果调整，位置重叠后调整麻烦）

添加用例

先看菜单框，拿“线上”为例，当“线上”在“未选中”状态被鼠标单击时，应切换为“选中”状态，展示出子菜单，同时，如果应该把“线下”切换为“未选中”状态（无论之前是否是“选中”状态），隐藏“线下”的子菜单框。
“选中”状态鼠标单击无效。

再看页签，页签我使用了根据箭头状态作为判断依据，当页签“未选中”时，箭头“向下”，此时鼠标单击页签，应该展开一级菜单栏，页签状态切换为“选中”，箭头状态切换为“向上”，同时切换其他所有页签、菜单项为“未选中”，并隐藏其他所有菜单栏，可以利用判断页签状态来实现。
当页签“选中”时，箭头“向上”，此时鼠标单击页签，切换为“未选中”，箭头状态“向下”，隐藏所有菜单栏。

case1

case2

case3

欢迎留言探讨更好的实现！