<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="app.css">
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
</head>
<body>
<ul>
<li class="main"><a href="#">菜单1</a>
<ul>
<li><a><a href="">子菜单1</a></li>
<li><a><a href="">子菜单2</a></li>
</ul>
</li>
<li class="main"><a href="#">菜单2</a>
<ul>
<li><a><a href="">子菜单1</a></li>
<li><a><a href="">子菜单2</a></li>
</ul>
</li>
<li class="main"><a href="#">菜单3</a>
<ul>
<li><a><a href="">子菜单1</a></li>
<li><a><a href="">子菜单2</a></li>
</ul>
</li>
</ul>
</body>
<script src="app.js"></script>
</html>
app.js:
$(document).ready(function(){
$(".main>a").click(function(){
var ulNode=$(this).next("ul");
/*if(ulNode.css("display")=="none"){
ulNode.css("display","block");
}else{
ulNode.css("display","none");
}*/
//ulNode.toggle("slow");//slow，normal，fast三种样式，还可以填写数字
ulNode.slideToggle("slow");
})
})
app.css:
ul,li{
list-style: none;
}
ul{
padding:0;
margin:0;
}
.main{
background-image: url(images/title.gif);
background-repeat: repeat-x;/*x轴重复*/
width: 100px;
}
li{
background-color: #eeeeee;
}
a{
text-decoration: none;
padding-left: 20px;
display: block;
width: 80px;
padding-top: 3px;
padding-bottom: 3px;
}
.main a{
color: white;
background-image: url(images/fangxiang.jpg);
background-repeat: no-repeat;/*不允许重复*/
background-position: 3px center;
}
.main li a{
color: black;
background-image: none;
}
.main ul{
display: none;
}