使用json生成Bootstrap无限极导航菜单

快来打我* 2022-06-17 02:15 226阅读 0赞

使用json生成，无限极菜单。  
依赖如下：

*  **Bootstrap**
 *  **Jquery**
 *  **bootstrap-submenu.js插件**

--------------------

你可以先访问这里：[https://vsn4ik.github.io/bootstrap-submenu/][https_vsn4ik.github.io_bootstrap-submenu] 了解一下bootstrap-submenu.js 插件，本文例子以bootstrap-submenu.js为基础，根据json生成无限极菜单。  
同时，使用了递归。可以先了解一下递归是什么。

--------------------

**代码上传至百度网盘和csdn**  
链接：[http://pan.baidu.com/s/1dFIKNPB][http_pan.baidu.com_s_1dFIKNPB] 密码：kro0  
或者 [http://download.csdn.net/detail/u012775558/9814052][http_download.csdn.net_detail_u012775558_9814052]

--------------------

生成效果如图：  
![这里写图片描述][SouthEast]

**大致思路**  
由于一级菜单具有不规则性，在本例中是一级菜单达到5个后自动隐藏，因此本例的实现方法是，根据json先生成了一级菜单，然后再递归生成一级菜单的无限极子菜单。  
**实现步骤**  
bootstrap-submenu.js插件的实现方式是，在html中放置了标记父子关系的li、ui标签，然后通过js激活菜单，可以参考该页面 [https://vsn4ik.github.io/bootstrap-submenu/][https_vsn4ik.github.io_bootstrap-submenu] ，  
下图是一个截图，可以观察一下li、ui的关系。  
![这里写图片描述][SouthEast 1]

因此本例的实现步骤就是，先获取到json数据，然后根据id与父节点id，处理成树形json，然后根据树形json生成html，然后js激活 无限极菜单。

**文件结构**  
![这里写图片描述][SouthEast 2]

**test.html内容**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>json生成无限极菜单</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/bootstrap-submenu.css" rel="stylesheet">
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/bootstrap-submenu.js"></script>
        <script src="js/nav.js"></script>
    </head>
    <body>
    
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="nav1">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">
                无限极菜单
            </a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav" id="systemWebMenu">
            </ul>
        </div>
    </nav>
    
    
    <script type="text/javascript"> $(document).ready(function () { showTreeFirst(tree);//生成一级菜单 showTree(tree);//生成其他菜单 $('[data-submenu]').submenupicker();//激活多级菜单 }); </script>
    
    </body>
    </html>

--------------------

**nav.js内容**  
menuData 是普通json，其中会有自身id和他的父节点id-menuIdParent

[https_vsn4ik.github.io_bootstrap-submenu]: https://vsn4ik.github.io/bootstrap-submenu/
[http_pan.baidu.com_s_1dFIKNPB]: http://pan.baidu.com/s/1dFIKNPB
[http_download.csdn.net_detail_u012775558_9814052]: http://download.csdn.net/detail/u012775558/9814052
[SouthEast]: /images/20220617/e964077258a04ca2962888f3bef13d03.png
[SouthEast 1]: /images/20220617/11227683852840488d5d8050753725b6.png
[SouthEast 2]: /images/20220617/2d3a4a728d524e4d8a357591a92ef309.png