JS面向對象方法（一）： 使用原生JS 實現導航欄下多級分類彈出效果

 

 

 

 利用二級菜單的onmouseover/out事件 重新構建一級菜單 ".hover" 樣式類　　　

代碼如下：

　　　　　　　　　　CSS部分: 在原來的目標：hover樣式中 增加 .hover狀態

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;
}

　　　　　　　　　　JS部分:在原來的觸發事件上 新增了 二級菜單觸發onmouseover/out時 設置各自的一級菜單的className 為 “hover”;

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="";
}

TIPS：

　　*越是熟悉 HTML/CSS的數據結構，就越可以在JS部分用更“優雅的”代碼來執行更多的事情。