layui多級導航tap切換

![在這裏插入圖片描述](https://img-blog.csdnimg.cn/20191120155511291.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9zaTE0MTM=,size_16,color_FFFFFF,t_70) 
![在這裏插入圖片描述](https://img-blog.csdnimg.cn/20191120155552253.png)
<div class="layui-body">
        <iframe src="https://weibo.com/" allowfullscreen></iframe>

​

<script>

​ // 導航菜單的間隔像素
​ var menuCell = 1;
​ layui.use(‘element’, function () {
​ var element = layui.element;
​ var $ = layui.jquery;
​ data = [
​ {
​ “name”: “文檔”,
​ “url”: “https://wenku.baidu.com/”,
​ “icon”: “layui-icon-snowflake”,
​ “childMenus”: null
​ },
​ {
​ “name”: “官方頁面”,

​ “url”: “www.sys.com”,

​ “icon”: “layui-icon-snowflake”,

​ “childMenus”: [

​ {

​ “name”: “頁面1”,

​ “url”: “https://mobile.ant.design/index-cn”,

​ “icon”: “layui-icon-snowflake”,

​ “childMenus”: null

​ },

​ {

​ “name”: “頁面2”,

​ “url”: “https://www.layui.com/admin/std/dist/views/home/homepage2.html”,

​ “icon”: “layui-icon-snowflake”,

​ “childMenus”: null

​ }

​ ]

​ },

​ {

​ “name”: “一級導航”,

​ “url”: “www.baidu.com”,

​ “icon”: “layui-icon-snowflake”,

​ “childMenus”: [

​ {

​ “name”: “二級導航”,

​ “url”: " https://www.swiper.com.cn/",

​ “icon”: “layui-icon-snowflake”,

​ “childMenus”: [

​ {

​ “name”: “三級導航”,

​ “url”: “https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312”,

​ “icon”: “layui-icon-snowflake”,

​ “childMenus”: [

​ {

​ “name”: “table頁面”,

​ “url”: “3-1.html”,

​ “icon”: “layui-icon-snowflake”,

​ “childMenus”: null

​ }

​ ]

​ },

​ {

​ “name”: “table3頁面”,

​ “url”: “https://www.echartsjs.com/zh/index.html”,

​ “icon”: “layui-icon-snowflake”,

​ “childMenus”: null

​ }

​ ]

​ }, {

​ “name”: “二級導航”,

​ “url”: " https://www.swiper.com.cn/",

​ “icon”: “layui-icon-snowflake”,

​ “childMenus”: [

​ {

​ “name”: “三級導航”,

​ “url”: “https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312”,

​ “icon”: “layui-icon-snowflake”,

​ “childMenus”: [

​ {

​ “name”: “table頁面”,

​ “url”: “3-1.html”,

​ “icon”: “layui-icon-snowflake”,

​ “childMenus”: null

​ }

​ ]

​ },

​ {

​ “name”: “table3頁面”,

​ “url”: “https://www.echartsjs.com/zh/index.html”,

​ “icon”: “layui-icon-snowflake”,

​ “childMenus”: null

​ }

​ ]

​ }

​ ]

​ }, {

​ “name”: “一級導航”,

​ “url”: “https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312”,

​ “icon”: “layui-icon-snowflake”,

​ “childMenus”: [

​ {

​ “name”: “table頁面”,

​ “url”: “3-1.html”,

​ “icon”: “layui-icon-snowflake”,

​ “childMenus”: null

​ }

​ ]

​ },

​ ];

​ console.log("data: " + data);

​ // data = JSON.parse(data);

​ var liStr = “”;

​ // 遍歷生成主菜單

​ for (var i = 0; i < data.length; i++) {

​ // 判斷是否存在子菜單

​ if (data[i].childMenus != null && data[i].childMenus.length > 0) {

​ console.log("–> " + JSON.stringify(data[i].childMenus));

​ liStr += “<li class=“layui-nav-item”><a class=”" href=“javascript:;”> " + data[i].name + “\n” +

​ “<dl class=“layui-nav-child”>\n”;

​ // 遍歷獲取子菜單

​ for (var k = 0; k < data[i].childMenus.length; k++) {

​ liStr += getChildMenu(data[i].childMenus[k], 0);

​ }

​ liStr += “”;

​ } else {

​ liStr += “<li class=“layui-nav-item”><a class=”" href=“javascript:;” data-url="" + data[i].url + “”> " + data[i].name + “”;

​ }

​ };

​ $("#menu").html("<ul class=“layui-nav layui-nav-tree” lay-filter=“test”>\n" + liStr + “”);

​ element.init();

​ // 頁面切換

​ $(document).on(‘click’, ‘#menu a’, function () {

​ var thisPage = $(this).attr(“data-url”);

​ if (typeof (thisPage) != “undefined”) {

​ if ($(’.layui-body iframe’).attr(‘src’) == thisPage) return;

​ $(’.layui-body iframe’).attr(‘src’, thisPage)

​ }

​ });

​ });

​ // 遞歸生成子菜單

​ function getChildMenu(subMenu, num) {

​ console.log("num: " + num);

​ num++;

​ var subStr = “”;

​ if (subMenu.childMenus != null && subMenu.childMenus.length > 0) {

​ subStr += “

<li class=“layui-nav-item” ><a style=“text-indent: " + num * menuCell + “em” class=”” href=“javascript:;”> " + subMenu.name + “” +
​ “<dl class=“layui-nav-child”>\n”;

​ for (var j = 0; j < subMenu.childMenus.length; j++) {

​ subStr += getChildMenu(subMenu.childMenus[j], num);
​ }
​ subStr += “”;

​ } else {

​ subStr += “

<a style=“text-indent:” + num * menuCell + “em” href=“javascript:;” data-url=”" + subMenu.url + “”> " + subMenu.name + “

”;
​ }
​ return subStr;
​ }
​