嗯嗯..第一版出现个问题...IE居然不兼容..于是换了种办法实现之...顺路添加了没有子菜单项直接跳转的主菜单项.
1.JS代码修改
- var saveMainItem;
- var saveSubItem;
- var tempData;
- //绑定CLASS
- function bindClass(selected)
- {
- $("#nav_node > li").each(function(i) { //遍历菜单
- if(i == selected) //当前单击的按钮
- {
- $(this).addClass("select"); //选定之
- }else
- {
- $(this).removeClass(); //删除样式
- }
- });
- }
- //初始化菜单
- function initMenu()
- {
- $("#nav_node").empty(); //清空主菜单各项
- var tempItem = saveMainItem.clone(true); //克隆一个节点
- for(var i=0 ;i< tempData.menumain.length ;i++) //遍历节点
- {
- tempItem = saveMainItem.clone(true); //克隆一个节点
- tempItem.find("a").attr("href",tempData.menumain[i].url); //设置HREF
- tempItem.find("a").attr("class",tempData.menumain[i].className); //设置ICON
- tempItem.find("a").html("<span></span>" + tempData.menumain[i].title); //设置标题
- tempItem.find("sup").attr("class",tempData.menumain[i].stat); //设置边上的那个按钮..
- tempItem.find("a").attr("id",i);
- $("#nav_node").append(tempItem); //添加节点
- }
- }
- //根据用户点击的按钮来生成子按钮列表
- function initSubMenu(eleNod)
- {
- var selected = $(eleNod).attr("id");
- $("#submenu").empty(); //清空子菜单各项
- tempSubData = tempData.menumain[selected].submenu; //提取子菜单列表
- for(var i=0 ;i< tempSubData.length ;i++) //遍历节点
- {
- var tempItem = saveSubItem.clone(true); //克隆节点
- tempItem.find("a").attr("href",tempSubData[i].url); //设置HREF
- tempItem.find("a").text(tempSubData[i].title); //设置TEXT
- $("#submenu").append(tempItem); //添加到子菜单中
- }
- bindClass(selected); //绑定CSS
- }
- //绑定数据
- function bind()
- {
- $.ajax({
- type: "get",//使用get方法访问后台
- dataType: "json",//返回json格式的数据
- url: "menu2.js",//要访问的后台地址
- data: "",//要发送的数据
- success: function(msg){//msg为返回的数据,在这里做数据绑定
- tempData = msg;
- initMenu(); //初始化菜单
- $("#nav_node > li").each(function(i){ //遍历所有主菜单项
- if(i == 0) //如果是第一个的话
- {
- initSubMenu($(this).find("a") ); //默认显示第一个主菜单项的子菜单项
- }
- if($(this).find("a").attr("href") == "#" ){ //如果没有链接的主菜单项
- $(this).find("a").click( function(){ //绑定单击事件
- initSubMenu( eval('this') );
- });
- }
- });
- }
- });
- }
- $(document).ready(function() {
- $('.menu, .active, .innertab, .foot').pngFix( );
- saveSubItem = $("#submenu > li").clone(true); //子菜单项
- saveMainItem = $("#nav_node > li").clone(true); //主菜单项
- bind(); //绑定数据
- });
嗯..就是添加了个ID.然后从ID来读取每个项的值...然后使用了常规的..JQUERY的CLICK....