效果图：
全部代码：
<!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 h4
{
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 h4").css("background", "#ccc");
// $(".menu h4").hover(function () { $(this).addClass("changecolor"); }, function () { $(this).removeClass("changecolor"); });
// $(".menu h4").click(function () { $(this).css("background", "red").next("p").show().siblings().hide(); });
$(".menu h4").hover(function () { $(this).css("background-color", "gray").siblings("h4").css("background-color", "#ccc"); })
$(".menu h4").mouseleave(function () { $(".menu h4").css("background", "#ccc") }); //离开时将其变为原来颜色
var index = $(".menu h4").index(this);
$(".menu h4").click(function () { $(this).next("p").slideToggle().siblings("p").slideUp(); });
});
</script>
</head>
<body>
<div class="menu">
<h4>
我的好友</h4>
<p>
周杰伦<br />
×××</p>
<h4>
我的朋友</h4>
<p>
李连杰<br />
本拉登</p>
<h4>
陌生人</h4>
<p>
比尔盖茨<br />
阿娇</p>
</div>
</body>
</html>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
