教程三级菜单和标签的交互使用

　　如何让三级菜单和标签页实现交互，笔者在此给出了一个教程，简单快捷的原型在向你招手
　　今天，教大家如何做一个框架，包含三级菜单和标签页两部分内容，以及他们之间相互交互的内容。
　　效果如下图所示：
　　在线演示地址
　　一、效果介绍
　　左边菜单栏，最多有三级菜单，可以通过菜单中继器维护，使用方便。
　　点击菜单，如果有子菜单会展开或收起子菜单；如果没有子菜单，自动新增标签页，并打开对应页面（不会重复生成标签）。
　　点击不同的标签页，切换不同的页面。
　　删除所有标签页，自动跳转到首页。
　　二、使用方法
　　本模板使用简单，已制作好交互效果，只需要填写菜单中继器的内容即可直接使用。
　　menu1：填写一级菜单的名称；
　　menu2：填写二级菜单的名称（需要在一级菜单处先写该二级菜单的一级菜单名称）；
　　menu3：填写三级菜单的名称（需要在一、二级菜单处先写该三级菜单的一、二级菜单名称）；
　　picture：菜单文字前面的图标，可上传图片；
　　see：1位载入时可见，0为隐藏；一般只有一级菜单填1，其他为0；
　　xiala：如果有子菜单，填1；如果没有，填0；
　　xuan：填写默认值0即可；
　　jinyong：填写默认值0即可。
　　三、制作方法
　　1。用中继器制作三级菜单
　　1）设置中继器内的表格
　　menu1：填写一级菜单的名称；
　　menu2：填写二级菜单的名称（需要在一级菜单处先写该二级菜单的一级菜单名称）；
　　menu3：填写三级菜单的名称（需要在一、二级菜单处先写该三级菜单的一、二级菜单名称）；
　　picture：菜单文字前面的图标，可上传图片；
　　see：1位载入时可见，0为隐藏；一般只有一级菜单填1，其他为0；
　　xiala：如果有子菜单，填1；如果没有，填0；
　　xuan：填写默认值0即可，既下拉箭头向下；如果需要默认打开下拉菜单，箭头向右，填1；
　　jinyong：填写默认值0即可，用于判断是否选中。
　　2）中继器材料
　　三个组合：
　　一级组合（文本标签矩形图片下拉标志）；
　　二级组合（文本标签矩形图片下拉标志）；
　　三级组合（文本标签矩形图片）。
　　3）中继器内逻辑
　　点击一级菜单：
　　收起状态：如果有子菜单，打开子菜单；如果没有子菜单，打开该名称的页面。
　　展开状态：收起子菜单。
　　点击二级菜单：
　　收起状态：如果有子菜单，打开子菜单；如果没有子菜单，打开该名称的页面。
　　展开状态：收起子菜单。
　　点击三级菜单，打开该名称的页面。
　　具体逻辑如下图所示：
　　2。用中继器制作标签页
　　1）设置中继器内的表格
　　column0：标签页名称，默认给一个首页；
　　xuanzhong：1打开对应页面，0不打开。
　　2）中继器材料
　　1个好看的标签矩形，删除x形状。
　　3）中继器内逻辑
　　点击标签矩形，取消选中其他标签，选中该标签并打开对应页面。
　　点击x，删除该标签，自动选择下个标签，并打开选中标签的页面。如果所有标签被删除，自动生成一个首页标签，并打开首页。
　　具体逻辑如下图所示：
　　3。制作对应页面
　　页面名称要和菜单中继器内名称相同（没有子菜单的菜单），然后在对应页面制作对应内容即可。
　　4。制作菜单与标签页的交互
　　点击没有子菜单的菜单时，记录该菜单文字，判断是否有该标签页。如果有，选中并打开该标签页；如果无，新建标签页并打开对应页面。
　　具体逻辑如下图所示：
　　总结
　　该原型非常实用，但制作相对复杂，新手不容易完成。
　　制作完成后，以后使用方便，仅需简单填写菜单中继器的内容，即可拥有完美的效果，所以强烈推荐给各位使用。