JS学习笔记（一）： 使用原生JS 实现导航栏下多级分类弹出效果

li.app_jd a:hover,li.app_jd a.hover{
    background-position: -126px -397px;
}
li.service>a:hover,li.service>a.hover {
    background-image:url(images/jt_up.jpg);
    background-color:#fff;
    border:1px solid #DDD;
    border-bottom-width:0px;
    position:relative;
    z-index:40;
} 
li.app_jd a:hover,li.app_jd a.hover{
    background-position: -126px -397px;
}

window.onload = function(){
    //顶部导航栏弹出
    $("#top_box .app_jd")[0].onmouseover=$("#top_box .service")[0].onmouseover=showItem;
    $("#top_box .app_jd")[0].onmouseout=$("#top_box .service")[0].onmouseout=hideItem;
    //商品主分类栏弹出
    $("#category")[0].onmouseover=showCate;
    $("#category")[0].onmouseout=hideCate;;
    //商品一级分类弹出二级分类
    var lis = $("#cate_box>li");
    for(var i=0;i<lis.length;i++){
        lis[i].onmouseover=showSubCate;
        lis[i].onmouseout=hideSubCate;
    }
}
function showItem(){
    this.$("[id$=‘_items‘]")[0].style.display="block";
    this.$("a")[0].className="hover";
}
function hideItem(){
    this.$("[id$=‘_items‘]")[0].style.display="none";
    this.$("a")[0].className="";
}
function showCate(){
    this.$("#cate_box")[0].style.display="block";
}
function hideCate(){
    this.$("#cate_box")[0].style.display="none";
}
function showSubCate(){
    this.$(".sub_cate_box")[0].style.display="block";
    this.$("h3")[0].className="hover";
}
function hideSubCate(){
    this.$(".sub_cate_box")[0].style.display="none";
    this.$("h3")[0].className="";
}