JQUERY读取JSON来生成主菜单及点击主菜单项显示相应子菜单 V2

嗯嗯..第一版出现个问题...IE居然不兼容..于是换了种办法实现之...顺路添加了没有子菜单项直接跳转的主菜单项.

1.JS代码修改

1. var saveMainItem;
2. var saveSubItem;
3. var tempData;
5. //绑定CLASS
6. function bindClass(selected)
7. {
8.     $("#nav_node > li").each(function(i) { //遍历菜单
9.         if(i == selected) //当前单击的按钮
10.         {
11.             $(this).addClass("select"); //选定之
12.         }else
13.         {
14.             $(this).removeClass(); //删除样式
15.         }
16.     });
17. }
20. //初始化菜单
21. function initMenu()
22. {
23.     $("#nav_node").empty(); //清空主菜单各项
24.     var tempItem = saveMainItem.clone(true); //克隆一个节点
25.     
26.     for(var i=0 ;i< tempData.menumain.length ;i++) //遍历节点
27.     {
28.         tempItem = saveMainItem.clone(true); //克隆一个节点
29.         
30.         tempItem.find("a").attr("href",tempData.menumain[i].url); //设置HREF
31.         tempItem.find("a").attr("class",tempData.menumain[i].className); //设置ICON
32.         tempItem.find("a").html("<span></span>" + tempData.menumain[i].title); //设置标题
33.         tempItem.find("sup").attr("class",tempData.menumain[i].stat); //设置边上的那个按钮..
34.         tempItem.find("a").attr("id",i);
35.     
36.         $("#nav_node").append(tempItem); //添加节点
37.     }
38. }
40. //根据用户点击的按钮来生成子按钮列表
41. function initSubMenu(eleNod)
42. {
43.     var selected = $(eleNod).attr("id");
44.     
45.     $("#submenu").empty(); //清空子菜单各项
46.     tempSubData = tempData.menumain[selected].submenu; //提取子菜单列表
47.     
48.     for(var i=0 ;i< tempSubData.length ;i++) //遍历节点
49.     {
50.         var tempItem = saveSubItem.clone(true); //克隆节点
51.         
52.         tempItem.find("a").attr("href",tempSubData[i].url); //设置HREF
53.         tempItem.find("a").text(tempSubData[i].title); //设置TEXT
54.         
55.         $("#submenu").append(tempItem); //添加到子菜单中
56.     }
57.     
58.     bindClass(selected);    //绑定CSS
59. }
61.                 
62. //绑定数据
63. function bind()
64. {
65.     $.ajax({
66.         type: "get",//使用get方法访问后台
67.         dataType: "json",//返回json格式的数据
68.         url: "menu2.js",//要访问的后台地址
69.         data: "",//要发送的数据
70.         success: function(msg){//msg为返回的数据，在这里做数据绑定
71.             tempData = msg;
72.             initMenu(); //初始化菜单
73.             
74.             $("#nav_node > li").each(function(i){   //遍历所有主菜单项
75.                 if(i == 0)  //如果是第一个的话
76.                 {
77.                     initSubMenu($(this).find("a") );    //默认显示第一个主菜单项的子菜单项
78.                 }
79.                 
80.                 if($(this).find("a").attr("href") == "#" ){ //如果没有链接的主菜单项
81.                     $(this).find("a").click( function(){    //绑定单击事件
82.                         initSubMenu( eval('this') );    
83.                     });
84.                 }
85.             }); 
86.          }
87.     });
88. }
90. $(document).ready(function() {
91.     $('.menu, .active, .innertab, .foot').pngFix( );
92.    
93.    saveSubItem = $("#submenu > li").clone(true); //子菜单项
94.    saveMainItem = $("#nav_node > li").clone(true); //主菜单项
96.    bind();  //绑定数据
97. });

嗯..就是添加了个ID.然后从ID来读取每个项的值...然后使用了常规的..JQUERY的CLICK....

from http://blog.youkuaiyun.com/my9963/archive/2008/12/15/3525485.aspx