![jQuery简单竖排手风琴折叠菜单代码]( "jQuery简单竖排手风琴折叠菜单代码")
项目需求
1.刚开始只显示，每个标题，
2.让每个 li列表隔行换色
3.当我点击某个标题时，下面的列表会缓慢的展开，其他列表展开的内容会收起
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jQuery1.8.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
border: 2px red #7FFFD4;
width: 200px;
}
h3{
background-color: #7FFFD4;
font-size: 16px;
line-height: 30px;
border-bottom: 1px gray solid;
}
li{
list-style: none;
background-color: #CCCCCC;
font-size: 12px;
line-height: 23px;
border-bottom: 1px gray #069DD5;
}
.aa{
height: 100px;
}
ul{
display: none;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
// 使用循环让 每个ul 下的li偶数隔行变色
for (var i=0;i<$("ul").length;i++) {
$("ul:eq("+i+") li:even").css("background-color","red")
}
// 当我们点击h3时，让当前的h3下一个标签（next()）,添加上滑下滑事件，并让同辈的ul元素隐藏起来
$("h3").click(function(){
$(this).next().slideToggle("slow").siblings("ul").slideUp();
})
});
</script>
<div id="a">
<h3>标题1</h3>
<ul>
<li>111111</li>
<li>111111</li>
<li>111111</li>
<li>111111</li>
<li>111111</li>
</ul>
<h3>标题2</h3>
<ul>
<li>2222222</li>
<li>22222222</li>
<li>2222222</li>
<li>22222222</li>
</ul>
<h3>标题3</h3>
<ul>
<li>333333333</li>
<li>3333333333</li>
<li>3333333</li>
<li>33333333</li>
</ul>
<h3>标题4</h3>
<ul>
<li>4444444</li>
<li>444</li>
<li>44444</li>
<li>44444</li>
<li>44444</li>
<li>444444</li>
<li>44444444</li>
</ul>
</div>
<!---->
</body>
</html>
