多层级导航栏

多级导航插件 思路 结构

children: [ { dirname: 'monitor', name: '实时监测', children: [ { filename: 'run', name: '实时运行情况', }, { filename: 'searchtrack', name: '车辆轨迹查询', }, { hidden: true, filename: 'test', name: '测试', }, ] }, { filename: 'monitor', name: '实时监测', }, ], } 交互 选中的是 h3 鼠标悬停 li 两个类 一个是悬停 一个是选中 跳转 记录当前目录层级 将文件名称目录名称添加到 h3 上然后通过,循环取出 最后加起来,意思就是先利用层级跳到根目录然后在通过循环获取的文件目录名称跳到其他目录

难点: 需要循环获取 h3.可能会想不到如何获取

配置 数据配置同一数据层级需要同一目录层级 文件名称不要有相同的

var multilevelNavData = { yz_map: { logo: 1, title: "永州市出租汽车监管平台", children: [ { dirname: "monitor", name: "实时监测", children: [ { filename: "run", name: "实时运行情况", }, { filename: "searchtrack", name: "车辆轨迹查询", }, { hidden: true, filename: "test", name: "测试", }, ], }, { filename: "monitor", name: "实时监测", }, ], }, }; 用法

new MultiNav(document.body, multilevelNavData.yz_map).active("searchtrack");

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。