This document resolves the following issues: 1. The JSON file is written in 2.jquery.getjson () using 3.jquery.each () using one of the 4.jQuery DOM operations:. Append () One of the methods of using 5.jQuery:. Children () Use one of the 6.jQuery traversal methods:. Siblings () uses one of the 7.jQuery binding event handlers:. On () using 8.jQuery sliding effects:. Slidetoggle (),. Slideup (),. Slidedown () the use of
Final effect:
1.navtab.html
1 <!DOCTYPE HTML>2 <HTML>3 4 <Head>5 <MetaCharSet= "UTF-8">6 <title>Generate menus with JQ and JSON</title>7 <Linktype= "Text/css"rel= "stylesheet"href= "Css/navtab.css" />8 <Scriptsrc= "Js/jquery_3.3.1_jquery.min.js"></Script>9 <Scriptsrc= "Js/navtab.js"></Script> Ten </Head> One A <Body> - - <DivID= "Nav_box"> the <ulID= "Nav-mainbox"> - <Liclass= "Nav_head"> - <spanclass= "Shead"><imgsrc= "Img/nav/home.png"/></span> - <ahref="#">Home</a> + <spanclass= "Sfoot"><imgsrc=""/></span> - </Li> + </ul> A </Div> at - </Body> - - </HTML>
2.nav.json
[{"NavId": 1, "Navtitle": "Level Menu 1", "Navparentid": 0}, {"NavId": 2, "Navtitle": "Level Menu 2", "Navparentid": 0}, {"NavId": 3, " Navtitle ":" Level Menu 1 sub 1 "," Navparentid ": 1}, {" NavId ": 4," Navtitle ":" Level Menu 1 Child 2 "," Navparentid ": 1}, {" NavId ": 5," Navtitle ":" First level menu 3 "," Navparentid ": 0}, {" NavId ": 6," Navtitle ":" Level Menu 2 sub 1 "," Navparentid ": 2}, {" NavId ": 7," Navtitle ":" Level Menu 3 Child 1 "," Navparentid ": 5}, {" NavId ": 8," Navtitle ":" First level Menu 2 sub 2 "," Navparentid ": 2}, {" NavId ": 9," Navtitle ":" Level Menu 4 "," Navparentid ": 0 }, {"NavId": Ten, "Navtitle": "Level Menu 4 sub 1", "Navparentid": 9}
3.navtab.js
1$(function() {2$.getjson ("Json/nav.json",function(data) {3 //1.getJSON method Gets the JSON file data, data for the JSON stored object group4 for(vari = 0; i < data.length; i++) {5 //2. Iterate through each object in the data array with a length of data.length6$.each (Data[i],function(Key, Val) {7 //3. Traverse the key-value pair for each data object, traverse 3, cause the JSON file has 3 key-value pairs8 //The key represents the property name, and Val represents the corresponding property value9 if(Data[i][key] = = 0) {Ten //4. Determine if the data object has a menu with a parent menu ID of 0 One //0 is a first-level menu, generates an LI tag, displays the menu item name data[i]["Navtitle"] A //add Li at the same class as data[i]["NavId"] -$ ("#nav-mainbox"). Append ("<li class=" "+ data[i][" navId "] +" ' ><span class= ' shead ' ></span><a>" + data[i]["Navtitle"] + "</a><span class= ' Sfoot ' > </span><ul></ul></li> "); - the //7. When the page is first loaded, only the submenu of the first level menu is displayed - //Other sub-menu items hidden -$ ("LI.1"). Children ("ul")). Slidedown (); -$ ("LI.1"). Siblings (). Children ("UL"). Slideup (); + - //6. Binding a point-and-click event for a first-level menu + //One-level menu item to slide Show or hide submenu items A //Also, the current menu is displayed, others are hidden at$ ("." + data[i]["navId"]). On ("click",function() { -$( This). Children ("UL"). Slidetoggle (); -$( This). Siblings (). Children ("UL"). Slideup (); - }) - - } in - if(Data[i][key] = = i + 1) { to //5. Judging non-primary menu items + //find the Li tag as its submenu item based on the parent menu ID of the object -$ ("." + data[i]["Navparentid"]). Find ("ul"). Append ("<li class=" + data[i]["navId"] + "' ><a href= '" + data[i][" Navurl "] +" > "+ data[i][" navtitle "+" </a></li> "); the } * }); $ Panax Notoginseng } - }) the});
4.navtab.css
1 Body{2 margin:0;3 padding:0;4 font-family:"Microsoft Jas Black";5 font-size:16px;6}7 8 ul,9 Li{Ten List-style:None; One} A - A, - A:hover, the a:active, - A:link{ - text-decoration:None; - Color:#3d3d3d; +} - + #nav_box{ A width:220px; at Height:100%; - -} - - #nav_box #nav-mainbox{ - padding:0; in -} to + #nav-mainbox Li{ - Background-color:#f2f2f2; the Color:#333; * font-size:14px; $ position:relative;Panax Notoginseng Line-height:44px; - cursor:Pointer; the Border-bottom:1px solid #dedede; + Border-right:1px solid #dedede; A the} + #nav-mainbox li:hover{ - Background-color:#ADADAD; $} $ . Shead{ - position:relative; - width:40px; the Height:40px; - Top:10px;Wuyi padding:10px; the -} Wu . Sfoot{ - position:relative; About width:40px; $ Height:40px; - Margin-left:70px; - -} A + #nav-mainbox Li ul{ the padding:0; -} $ the #nav-mainbox Li ul li{ the position:relative; the Padding-left:70px; the Background-color: White; - Border-bottom:1px solid #dedede; in Border-right:1px solid #dedede; the} the #nav-mainbox Li ul li:hover{ About Background-color:#ccc; the}
Note: The file name of the icon in front of the first-level menu is the Navid value in its corresponding JSON file
BODY END!!!!!
JS Control JSON Build menu--homemade menu (i)