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();
*/
});
});
运行效果如下：
原文地址：http://qing0991.blog.51cto.com/1640542/1637374
