利用jQuery实现垂直菜单和水平菜单效果

浏览数：29 / 时间：2015年06月09日

1 利用jQuery实现垂直菜单

1.1 创建VerticalMenu.html文件，内容如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link href="vertical.css" rel="stylesheet">
    <script src="jquery-1.11.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="vertical.js"></script>
    <title>垂直菜单</title>
</head>
<body>
<ul>
    <li class="main">
        <a href="#"> 垂直菜单1</a>
        <ul>
            <li><a href="#">子菜单1</a> </li>
            <li><a href="#">子菜单2</a> </li>
        </ul>
    </li>
    <li class="main">
        <a href="#"> 垂直菜单2</a>
        <ul>
            <li><a href="#">子菜单1</a> </li>
            <li><a href="#">子菜单2</a> </li>
        </ul>
    </li>
    <li class="main">
        <a href="#"> 垂直菜单3</a>
        <ul>
            <li><a href="#">子菜单1</a> </li>
            <li><a href="#">子菜单2</a> </li>
        </ul>
    </li>
</ul>
</body>
</html>

1.2 创建vertical.css文件，内容如下：

ul,li{
    list-style: none;
}
ul{
    padding: 0;
    margin: 0;
}
.main{
     150px;
    background-image: url("images/toptitle.gif");
    background-repeat: no-repeat;
}
a{
    text-decoration: none;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 20px;
    display: block;
     120px;

}
.main a{
    color: #ffffff;
    background-image: url("images/collapsed.gif");
    background-repeat: no-repeat;
    background-position: 3px center;
}
.main li a{
    color: #000000;
    background-image: none;
}
.main ul{
    display: none;
}

1.3 创建vertical.js文件，内容如下：

$(function(){
    $(".main>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();
        */
    });
});