Dynamically create multi-level menu navigation with jquery based on JSON

HTML structure:

<section class= "sidebar" ></setion>

{"Liclass": "Active treeview", "link": "Index2.html", "label": "Structure Preview", "IClass": "Fa Fa-dashboard '", "Children": []}, {"Liclass": "TreeView", "link": "#", "label": "Case", "IClass": "FA fa-f Iles-o ' "," Spanclass ":" Pull-right-container "," Spanchildiclass ":" Label Label-primary pull-right "," Childr En ": [{" Ulclass ":" Treeview-menu "," children ": [{" Liclass ":" TreeView "," link ":" # "," label ":" Literal "," IClass ":" ' FA Fa-circle-o ' "," children               ": []}, {" Liclass ":" TreeView "," link ":" # "," label ":" Text ",  "IClass": "' FA Fa-circle-o '", "Children": []}, {"Liclass":              "TreeView", "link": "#", "label": "Literal", "IClass": "' FA Fa-circle-o '",         "Children": []   }, {"Liclass": "TreeView", "link": "#", "label": "Text",              "IClass": "' FA Fa-circle-o '", "Children": []}, {"Liclass": "TreeView", "Link": "#", "label": "Literal", "IClass": "' FA Fa-circle-o '", "Children": [              ]}, {"Liclass": "TreeView", "link": "#", "label": "Text", "IClass": "' FA Fa-circle-o '", "Children": []}, {"Liclass": "tr Eeview "," link ":" # "," label ":" Literal "," IClass ":" ' FA Fa-circle-o ' "," ch  Ildren ": []}, {" Liclass ":" TreeView "," link ":" # "," label ": "Text", "IClass": "' FA Fa-circle-o '", "Children": []}, {"LiC      Lass ":" TreeView ",        "Link": "#", "label": "Literal", "IClass": "Fa Fa-circle-o '", "Children": []              }, {"Liclass": "TreeView", "link": "#", "label": "Dealer price influence, chain", "IClass": "' FA Fa-circle-o '", "Children": []}, {"Liclass":              "TreeView", "link": "#", "label": "Literal", "IClass": "' FA Fa-circle-o '", "Children": []}, {"Liclass": "TreeView", "link": "#", "Labe L ":" Text "," IClass ":" ' FA Fa-circle-o ' "," Children ": []}, {"              Liclass ":" TreeView "," link ":" # "," label ":" Literal "," IClass ":" Fa Fa-circle-o ' ",              "Children": []}, {"Liclass": "TreeView", "link": "#", "Label": "1.0.01",             "IClass": "' FA Fa-circle-o '", "Children": []}, {"Liclass":              "TreeView", "link": "#", "label": "1.2.11", "IClass": "' FA Fa-circle-o '", "Children": []}}]}, {"Liclass": "TreeView", "link": "#", " Label ":" Text "," IClass ":" ' FA Fa-share ' "," Spanclass ":" Pull-right-container "," Spanchildiclass ":" FA Fa-ang              Le-left pull-right "," children ": [{" Ulclass ":" Treeview-menu "," children ": [{ "Liclass": "TreeView", "link": "#", "label": "Literal", "IClass": "FA fa-c Ircle-o ' "," Spanclass ":" Pull-right-container "," Spanchildiclass ":" FA fa-angle-left pull-right "                    , "Children": [{"Ulclass": "Treeview-menu", "Children": [    {                  "Liclass": "TreeView", "link": "#", "label": "Text", "IClass": "' FA Fa-circle-o '", "Spanclass": "Pull-right-container", "sp                          Anchildiclass ":" FA fa-angle-left pull-right "," children ": [{                              "Ulclass": "Treeview-menu", "children": [{                              "Liclass": "TreeView", "link": "#", "label": "Text",                            "IClass": "Fa Fa-circle-o '", "Children": [] }, {"Liclass": "TreeView", "                              Link ":" # "," label ":" Literal "," IClass ":" ' FA Fa-circle-o ' ", "CHildren ": []}, {" Liclass ":" TreeView " , "link": "#", "label": "Text", "Icla                            SS ":" ' FA Fa-circle-o ' "," Children ": []},                              {"Liclass": "TreeView", "link": "#", "Label": "Text", "IClass": "' FA Fa-circle-o '", "children":                              []}, {"Liclass": "TreeView", "Link": "#", "label": "Literal", "IClass": "' FA                             Fa-circle-o ' "," Children ": []}, { "Liclass": "TreeView", "link": "#", "label": "Text",                            "IClass": "Fa Fa-circle-o '", "Children": []},                              {"Liclass": "TreeView", "link": "#",                              "Label": "Text", "IClass": "' FA Fa-circle-o '", "Children": []}, {"Liclass"                              : "TreeView", "link": "#", "label": "Text",                          "IClass": "' FA Fa-circle-o '", "Children": []}              ]                        }                      ]                    }                  ]                }            ]}, {"Liclass": "TreeView", "link": "#", "label": "Text", "IC Lass ":" ' FA Fa-circle-o ' "," Spanclass ":" Pull-right-container "," Spanchildiclass ":" FA fa-angle-                  Left Pull-right "," children ": [{" Ulclass ":" Treeview-menu ",                      "Children": [{"Liclass": "TreeView", "link": "#", "Label": "Text", "IClass": "' FA Fa-circle-o '", "Spanclass": "Pull-ri                        Ght-container "," Spanchildiclass ":" FA fa-angle-left pull-right "," Children ": [                            {"Ulclass": "Treeview-menu", "Children": [                            {"type": "Li", "Liclass": "TreeView",  "Link": "#", "label": "Literal", "IClass": "' FA Fa-circle-o '",                              "Children": []}, {                              "Liclass": "TreeView", "link": "#", "label": "Text",                            "IClass": "Fa Fa-circle-o '", "Children": [] }, {"Liclass": "TreeView", "link":                              "#", "label": "Literal", "IClass": "' FA Fa-circle-o '",                      "Children": []}]}              ]                    }                  ]                }              ]            },            { "Liclass": "TreeView",              "Link": "#", "label": "Literal", "IClass": "Fa Fa-circle-o '", "Spanclass"                : "Pull-right-container", "Spanchildiclass": "FA fa-angle-left pull-right", "Children": [                      {"Ulclass": "Treeview-menu", "children": [{ "Liclass": "TreeView", "link": "#", "label": "Text", " IClass ":" ' FA Fa-circle-o ' "," Spanclass ":" Pull-right-container "," Spanchildicla SS ":" FA fa-angle-left pull-right "," children ": [{"                              Ulclass ":" Treeview-menu "," children ": [{                              "Liclass": "TreeView", "link": "#", "label": "Text", "IclasS ":" ' FA Fa-circle-o ' "," Children ": []},                              {"Liclass": "TreeView", "link": "#", "Label": "Text", "IClass": "' FA Fa-circle-o '", "Children": [                    ]                            }                          ]                        }                      ]                      }, {"Liclass": "TreeView", "link": "#", "Label": "Text", "IClass": "' FA Fa-circle-o '", "Spanclass": "Pull-right-contai                        Ner "," Spanchildiclass ":" FA fa-angle-left pull-right "," Children ": [                            {"Ulclass": "Treeview-menu", "Children": [           {                   "Liclass": "TreeView", "link": "#", "label":                            "Text", "IClass": "' FA Fa-circle-o '", "Children": []                              }, {"Liclass": "TreeView",                              "Link": "#", "label": "Literal", "IClass": "' FA Fa-circle-o '",                              "Children": []}, {                              "Liclass": "TreeView", "link": "#", "label": "Text",                            "IClass": "Fa Fa-circle-o '", "Children": [] }, {"Liclass": "TreeView", "link                 ": "#",             "Label": "Text", "IClass": "' FA Fa-circle-o '", "child                              ren ": []}, {" Liclass ":" TreeView ",  "Link": "#", "label": "Text", "IClass":                            "' FA fa-circle-o '", "Children": []},                              {"Liclass": "TreeView", "link": "#",                            "Label": "Text", "IClass": "' FA Fa-circle-o '", "Children": []                    }                          ]                        }                      ] }                  ]                }              ]            }          ]        }      ]    },

JSON data

/** * Created on 2017/6/27.*/$(function() {$.getjson ({type:"Get", URL:"Dist/json/nav.json", Success:function(data) {varShowlist = $ ("<ul class=" + data.ulclass + "' ><li class= ' header ' > main navigation </li></ul>");            ShowAll (data, showlist); $(". Sidebar"). Append (showlist);    }    }); //data is JSON    //parent is the container to be combined into HTML    functionShowAll (data, parent) {$.each (Data.children,function(Index, Fatherli) {//traversing datasets            varLi1 = $ ("<li class=" + fatherli.liclass + "' ><a href= '" + Fatherli.link + "' ><i class=" + fatherli.iclass + "></i>" + Fatherli.label + "</a></li>");//the initial Li structure without children            varLi2 = $ ("<li class=" + fatherli.liclass + "' ><a href= '" + Fatherli.link + "' ><i class=" + fatherli.iclass + "></i>" + Fatherli.label + "<span class=" + fatherli.spanclass + "' ><i class= '" + Fatherli.spanchildi Class + "></i></span>" + "</a></li>");//initial Li structure with children            //Console.log ($ (LI1). html ());            //Console.log ($ (li2). html ());            if(FatherLi.children.length > 0) {//If there are child nodes, the child node is traversed                varUL = $ ("<ul class=" + fatherli.children[0].ulclass + "></ul>"); $ (LI2). APPEND (ul). AppendTo (parent);//Select the Li initialization and add the UL child node with the class name immediately, and add the Li to the Father nodeShowAll (Fatherli.children[0], $ (li2). Children (). EQ (1));//passing the blank ul as the next recursive traversal Father node, recursive call ShowAll function}Else{$ (LI1). AppendTo (parent);//If the node has no child nodes, directly add the node Li and the text directly to the Father node .            }        }); }});

JS Code

Summarize:

1, although the JSON data is the DOM structure mapping, but the stored dom information is not copied all, such as each UL or Li there is no need to save a "type" in JSON: "UL", need to observe the structure of the DOM common ground and law, and then converted to JSON.

2, the Ajax callback function passed the parameter problem: write back to the function when found there is no local parameters, this time involves a closure problem, you can use the anonymous function call the function you want to call, and pass the parameters:

$.getjson ({        "post",        "Dist/json/nav.json",        function  (data) {             var showlist = $ ("<ul class=" + data.ulclass + "' ><li class= ' header ' > main navigation </li></ul>" c10>);            ShowAll (data, showlist);            $ (". Sidebar"). Append (showlist);        }    );

like this

3. This multilevel menu is similar to the dynamic generation of complex headers in table, the next step is to try to dynamically generate complex headers with JSON

　　

Dynamically create multi-level menu navigation with jquery based on JSON