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

来源：互联网发布：淘宝通用文案编辑：程序博客网时间：2024/06/04 18:04

嗯嗯..第一版出现个问题...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....