导读:画图很蛋疼，所以还是使用css做一个。刚学的写的很纠结。希望大牛不要介意。
效果图：
全部代码：
<!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>
<title></title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
font-size: 15px;
padding: 100px;
}
.menu
{
width: 500px;
border-bottom: solid 1px gray;
}
.menu h3
{
border: solid 1px gray;
height: 30px;
line-height: 30px;
padding-left: 10px;
padding: 0 5px;
border-bottom: none;
cursor: pointer;
}
.menu p
{
border-left: solid 1px gray;
border-right: solid 1px gray;
padding: 5px 0;
padding-left: 5px;
}
.changecolor{background-color:red;}
</style>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(".menu p:not(:first)").hide();
$(".menu h3").css("background", "#ccc");
// $(".menu h3").hover(function () { $(this).addClass("changecolor"); }, function () { $(this).removeClass("changecolor"); });
// $(".menu h3").click(function () { $(this).css("background", "red").next("p").show().siblings().hide(); });
$(".menu h3").hover(function () { $(this).css("background-color", "gray").siblings("h3").css("background-color", "#ccc"); })
$(".menu h3").mouseleave(function () { $(".menu h3").css("background", "#ccc") }); //离开时将其变为原来颜色
var index = $(".menu h3").index(this);
$(".menu h3").click(function () { $(this).next("p").slideToggle().siblings("p").slideUp(); });
});
</script>
</head>
<body>
<div class="menu">
<h3>
我的好友</h3>
<p>
周杰伦<br />
温家宝</p>
<h3>
我的朋友</h3>
<p>
李连杰<br />
本拉登</p>
<h3>
陌生人</h3>
<p>
比尔盖茨<br />
阿娇</p>
</div>
</body>
</html>