二级横菜单显示+sitemesh母板应用

效果图：

代码如下：

/**
 * 二级横菜单，sitemesh通用模版
 * 主要思想：菜单项点击后，变激活色，经过其他的变背景色
 * 增加层$("<div></div>") $('div[menuId='+tem1+']') $("div[id^=sk]") $('#'+i) $("div.menu") 代表层的5种方法
 */
var menustate="";
var substate="";//判断是否被点击
$().ready(function(){
    getTestData(showData);//调用的比较晚，callback回调函数
});

function getTestData(callback){
    var url="menuData.json";
    $.getJSON(url,null,function(data){testData=data;callback(data);});//url可以是action ，param是传给action的
}

function showData(data){
    for(var id in data)
        {   
                var menuiddiv = $("div#sk" + id);//可以不需要  那种下拉的 需要再添加一个层
                menuiddiv=$("<div></div>").addClass("menuItem").attr({id:"sk" + id,menuId:id}).appendTo($("div.menu"));
                $("<div></div>").html(data[id]["name"]).appendTo(menuiddiv);
                menuiddiv.mouseover(function(){
                    if($(this).attr("menuId")!=menustate) $(this).css("background-color","yellow");
            }).mouseout(function(){
                if($(this).attr("menuId")!=menustate) 
                $(this).css("background-color","white");
            }).click(function(event){
                    $("div[id^=sk]").css("background-color","white"); //其他所有的层，^表示开头，$表示结束 正则表达式
                    $(this).css("background-color","red");menustate=$(this).attr("menuId");showSub(this);
            });
        }
    //下面的是为母板服务的
    var valArry = window.location.href.split("=");
    if(valArry.length > 1){//区分是否有参数，如编辑和增加那个模块
        var temp = valArry[1].split("_");
        var tem1 = temp[0]; var tem2=temp[1];
        $('div[menuId='+tem1+']').css("background-color","red");showSub($('div[menuId='+tem1+']'));//一级菜单背景色改变，并显示二级菜单
        $('div[subId='+tem2+']').css("background-color","blue");substate=tem2;//选中的子菜单变背景色，且标志它
        }
}
function showSub(param){
    var menuId=$(param).attr("menuId");
    var a=testData[menuId]["subMenu"];
    $("div.submenu").html('');
    for(var j in a)//j指一个小json
        $("<div></div>").addClass("menuItem").html(a[j]["name"]).attr({action:a[j]["action"],subId:j}).appendTo($("div.submenu")).mouseover(function(){
            if($(this).attr("subId")!=substate)
            $(this).css("background-color","yellow");}).mouseout(function(){
                if($(this).attr("subId")!=substate)$(this).css("background-color","white");}).click(function(){
               var param=menuId+"_"+$(this).attr("subId");
                var action = $(this).attr("action")+"?id="+param;//传显示子菜单的参数
                window.location = action;
            
        });
}

涉及知识点回顾：
1、jquery 3类属性(8个)  attr 、removeAttr / addClass 、removeClass 、hasClass  、toggolClass / html 、val

2、jquery  选择器  $("")或者是带参数$(''+param+'')格式 5+4+4+7+10+4 6类34个

        通用5个（*，#id，.class，element，.class.class）如$("ul li :eq(3)")

        配用4个（:first，:last，:even，:odd）

        索引4个（:eq(index)，:qt(no)，:lt(no)，:not(selsctor)） 如 $("input :not(:empty)")

        正则表达式常用符号 ^&http://www.cnblogs.com/yirlin/archive/2006/04/12/373222.html 如$("div^=d")

        指所有的元素7个 （:head，:animated，:contains(text)，:empty，:hidden，:visible，s1,s2,s3）

        属性元素4个 （[attribute]，[attribute=value]，[attribute!=value]，[attribute$=value]）$("[href$='.jpg']")

        input元素10个（:input，:text，:password，:radio，:checkbox，:submit，:reset，:button，:image，:file）

        input动作元素4个   （:enabled，:disabled，:selected，:checked）

3、jquery 文档操作

4、jquery事件

5、jquery css

6、jquery Ajax callback   jQuery.getJSON()