代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#qq li:even").addClass("header");
$("#qq li:odd").addClass("body");
$("#qq li:even").click(function () {
$(this).next("li.body").show("normal").siblings("li.body").hide("normal");
});
$("#qq li:first").click();
});
</script>
<style type="text/css">
#qq {
list-style-type:none;
border-style:solid;
border-width:1px;
border-color:gray;
padding-left:0px;
}
.header {
background-color:#d9cfcf;
color:red;
font-weight:500;
cursor:pointer;
border-style:solid;
border-width:1px;
border-color:gray;
}
.body {
background-color:#f7f7ac;
}
</style>
</head>
<body>
<ul id="qq" style="width:100px">
<li>好友</li>
<li>阿里巴巴<br />小树<br />大海</li>
<li>同学</li>
<li>老五<br />老三<br />张强</li>
<li>同事</li>
<li>李老师<br />王老师<br />老岳<br />姚老师</li>
</ul>
</body>
</html>