qq一样的打开折起.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>qq折叠版</title>
<style type="text/css">
ul{
list-style:none;
}
.header{
background-color:#FF0000;
cursor:pointer;
width:102px;
}
.body{
border:1px #00FF00 solid;
width:100px;
}
</style>
<script language="javascript" type="text/javascript" src="jsBank/jquery-1.4.2.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
$("#qq li:odd").addClass("body");
$("#qq li:even").addClass("header").click(function(){
$(this).next("li.body").show("fast").siblings("li.body").hide("fast");
});
$("#qq li.body").hide();//模拟点击一下 .body这个属性是表示拥有body这个css样式的东西 odd 偶数的 even级数的
});
</script>
</head>
<body>
<ul id="qq">
<li>我的好友</li>
<li>张三<br />李四<br /></li>
<li>我的同学</li>
<li>拉登<br />奥巴马<br /></li>
<li>陌生人</li>
<li>小树</li>
</ul>
</body>
</html>
文章来源: bugstack.blog.csdn.net，作者：小傅哥，版权归原作者所有，如需转载，请联系作者。
原文链接：bugstack.blog.csdn.net/article/details/7766311
- 点赞
- 收藏
- 关注作者
评论（0）