模仿QQ收起展开
欢迎打击
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery-1.12.1.js"></script>
<title>QQ隐藏展示</title>
<style>
ul , h2 { padding:0; margin:0; }
li { list-style:none; }
#list { width:240px; border:1px solid #333; margin:0 auto; }
#list .lis {}
#list h2 { height:30px; line-height:30px; text-indent:20px; background:url(img/ico1.gif) no-repeat 5px center #6FF; color:#000; }
#list .active { background:url(img/ico2.gif) no-repeat 5px center #FF9; color:#000; }
#list ul { display:none; }
#list ul li { line-height:24px; border-bottom:1px solid #333; text-indent:24px; }
#list ul .hover { background:#6FF; }
</style>
<script>
$(document).ready(function(){
$('h2').click(function(){
$(this).toggleClass('active') //点击取消添加和删除active
$(this).next().toggle() //h2的同级同辈元素实现显示和影藏
});
$('#list ul li').click(function(){
$(this).siblings().removeClass('hover') //li的同辈元素实现移除
$(this).addClass('hover') //li的同辈元素实现显示和影藏
})
})
</script>
</head>
<body>
<ul id="list">
<li class="lis">
<h2>我的好友</h2>
<ul>
<li>张三</li>
<li>张三</li>
<li>张三</li>
<li>张三</li>
</ul>
</li>
<li class="lis">
<h2>企业好友</h2>
<ul>
<li>李四</li>
<li>李四</li>
<li>李四</li>
<li>李四</li>
<li>李四</li>
</ul>
</li>
<li class="lis">
<h2>黑名单</h2>
<ul>
<li>张小三</li>
<li>李小四</li>
</ul>
</li>
</ul>
</body>
</html>
