jQuery垂直菜单和水平菜单实现

1 创建VerticalAndhorizontalMenu.html文件

    
    
    
    
    




    
         垂直菜单1
        

            
子菜单1 
            
子菜单2 
        
    
    
         垂直菜单2
        

            
子菜单1 
            
子菜单2 
        
    
    
         垂直菜单3
        

            
子菜单1 
            
子菜单2 
        
    







    
         垂直菜单1
        

            
子菜单1 
            
子菜单2 
        
    
    
         垂直菜单2
        

            
子菜单1 
            
子菜单2 
        
    
    
         垂直菜单3
        

            
子菜单1 
            
子菜单2 
        
    

2 创建VerticalAndhorizontalMenu.css文件

ul,li{
    list-style: none;
}
ul{
    padding: 0;
    margin: 0;
}
.vmain{
    width: 150px;
    background-image: url("images/toptitle.gif");
    background-repeat: no-repeat;
    margin-bottom: 2px;
}
.hmain{
    width: 150px;
    background-image: url("images/toptitle.gif");
    background-repeat: no-repeat;
    margin-right: 2px;
    float: left;
}
a{
    text-decoration: none;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 20px;
    display: block;
    width: 130px;
}
.vmain a,.hmain a{
    color: #ffffff;
    background-image: url("images/collapsed.gif");
    background-repeat: no-repeat;
    background-position: 3px center;
}
.vmain li a,.hmain li a{
    color: #000000;
    background-image: none;
    background-color: #eeeeee;
    border-bottom: 1px solid #dddddd;
}
.vmain li a:hover,.hmain li a:hover{
    background-image: url("images/linkarrow.gif");
    background-repeat: no-repeat;
    background-position: right center;
    background-color: #006666;
    color: #fff;
}
.vmain ul,.hmain ul{
    display: none;
}

3 创建VerticalAndhorizontalMenu.js文件

$(function(){
    $(".vmain>a").click(function(){
        var ulNode=$(this).next("ul");
        /*方法一*/
        if(ulNode.css("display")=="none"){
            ulNode.css("display","block");
            /*
             或：
             ulNode.show("normal");//数字（毫秒）,fast,slow、normal和fast
             或：
             ulNode.slideDown();
             */
        }
        else{
            ulNode.css("display","none");
            /*
             或：
             ulNode.hide("normal");
             或：
             ulNode.slideUp();
             */
        }
        /*
         或方法二：
         ulNode.toggle("normal");//数字（毫秒）,fast,slow、normal和fast
         或方法三：
         ulNode.slideToggle();
         */
    });
    $(".hmain").hover(function(){
        $(this).children("ul").slideDown("normal");
        changeIcon($(this).children("a"));
    },function(){
        $(this).children("ul").slideUp("normal");
        changeIcon($(this).children("a"));
    });
});
function changeIcon(mainNode){
    if(mainNode){
        if(mainNode.css("background-image").indexOf("collapsed.gif")>=0){
            mainNode.css("background-image","url(‘images/expanded.gif‘)");
        }else{
            mainNode.css("background-image","url(‘images/collapsed.gif‘)");
        }
    }
}

4、运行效果如下

本文出自 “IT技术学习与交流” 博客，谢绝转载！

jQuery垂直菜单和水平菜单实现