php 侧边栏效果,侧边栏效果：如何在跳转后保持侧边栏已有的展开状态

上篇讲解了如何制作简单的侧边栏及跳转的交互，这一篇中，笔者将讲解：如何在跳转后保持侧边栏已有的展开状态，以及通过字体颜色变化表示当前所在页面。

1. 选择 P1+P2 矩形，双击右侧检视，属性，交互，鼠标单击时的 Case1

2. 点击切换选中状态，选择当前元件，确定

3. 选择 P1+P2 矩形，右侧属性，交互样式设置，点击选中

4. 填充颜色选黄色，确定

5. 双击右侧概要，P1+P2DT 动态面板下的 State1，进入该页面

6. 点击 P1 单元格，右侧属性，交互样式设置，选中

7. 字体颜色选橙色，确定

8. 同样将 P2 单元格选中的交互样式设置为字体颜色橙色

9. 双击左侧侧边栏母版，回到侧边栏母版首页，然后点击布局，管理母版触发事件

10. 点击加号，新增自定义事件，取名为 PageC

11. 双击右侧概要，P1+P2DT 动态面板下的 State1，进入该页面

12. 单击空白处，在右侧检视，属性，点击载入时

13. 点击自定义事件，选中 PageC，确定

14. 双击左侧 New Page1 页面

15. 点击 New Page1 中的侧边栏母版区域，右侧检视，属性，交互，单击 PageC

16. 设置面板状态，选择 P1+P2DT 动态面板，选中如果隐藏则显示面板，推动 / 拉动元件。确定

17. 设置选中，选择 P1 单元格，确定

18. 设置选中，选择 P1+P2 矩形，确定

19. 同理，进入 New Page2 页面，对 New Page2 中的侧边栏区域，设置 P1+P2DT 动态面板为如果隐藏则显示面板，推动 / 拉动元件；设置选中 P2 单元格，设置选中 P1+P2 矩形，确定

此时预览，即可看到以下效果

点击跳转到 P1 页面时，侧边栏的 P1+P2 为打开状态，颜色为黄色，P1 单元格字体为橙色，表示当前页面为 P1+P2 下的 P1 页面；

点击跳转到 P2 页面时，侧边栏 P1+P2 为打开状态，颜色为黄色，P2 单元格字体为橙色，表示当前页面为 P1+P2 下的 P2 页面。

本文由 @落尘 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自 Unsplash ，基于 CC0 协议