<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery-1.7.1.min.js"></script>
<script>
$(function () {
$('ul').hide();
$('span').mouseover(function () {
$(this).css('cursor', 'pointer');
});
$('span').click(function () {
//$(this).next('ul').show().end().siblings().next('ul').hide();
$(this).next('ul').slideDown(1000).end().siblings().next('ul').slideUp(1000);
});
});
</script>
</head>
<body>
<span>我的好友</span>
<ul>
<li>好友1</li>
<li>好友2</li>
<li>好友3</li>
<li>好友4</li>
<li>好友5</li>
</ul>
<br />
<span>黑名单</span>
<ul>
<li>黑1</li>
<li>黑2</li>
<li>黑3</li>
<li>黑4</li>
<li>黑5</li>
</ul>
</body>
</html>