心花怒放啊......
可是 MM 走光了......
<script type="text/javascript">
$(document).ready(function(){
$(".button_s").click(function(){
$("#panel").slideToggle("fast");
$(this).toggleClass("button_s_active");
$(".slidex").toggleClass("slidex_active");
$(".arrow").toggleClass("arrow_active");
return false;
});
});
</script>HTML代码：<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery : Write less , Do more . </title>
<link href="demo.css" rel="stylesheet" type="text/css" />
<!-- 先引入样式表，具体位置看你自己了 -->
<script type="text/javascript" src="jquery.js"></script>
<!-- 上面先引入jQuery，具体版本和位置看你自己了 -->
<script type="text/javascript">
$(document).ready(function(){
$(".button_s").click(function(){
$("#panel").slideToggle("fast");
$(this).toggleClass("button_s_active");
$(".slidex").toggleClass("slidex_active");
$(".arrow").toggleClass("arrow_active");
return false;
});
});
</script>
</head>
<body>
<div class="boxer">
<div id="panel" title="你心花怒放了不？">
<p>心花怒放啊......<br />可是 MM 走光了......</p>
</div>
<p class="slidex"><a href="#" class="button_s" title="看见漂亮MM了吗？"></a></p>
<p class="arrow"></p>
</div>
</body>
</html>CSS样式表：body {
margin: 0 auto;
padding: 0;
font: 75%/120% '微软雅黑',Arial, Helvetica, sans-serif;
}
.boxer {
width: 800px;
margin:0 auto;
}
a:focus {
outline: none;
}
#panel {
background: url(images/back.png) repeat;
height: 200px;
border:solid 4px #f68e1c;
text-shadow:2px 2px 1px rgba(0,0,0,0.4);
border-bottom:0px;
color:yellow;
display: none;
}
#panel p {
width:80%;
font-size:36px;
height:150px;
line-height:50px;
padding:30px 0 0 0;
margin:10px auto;
background: url(images/h1_128.png) no-repeat right center;
}
.slidex {
margin: 0;
padding: 0;
height:40px;
overflow:hidden;
border-top: solid 4px #f68e1c;
background: url(images/btn-slide.gif) no-repeat center top;
}
.slidex_active {
background-position: center -40px;
}
.button_s {
background: url(images/white-arrow.gif) no-repeat right -50px;
text-align: center;
width: 144px;
height: 31px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
color: #fff;
text-decoration: none;
}
.button_s_active {
background-position: right 12px;
}
.arrow {
padding:0 0 0 0px;
height:50px;
width:300px;
margin:0px auto;
background: url(images/arrow.png) no-repeat center top;
}
.arrow_active {
background-position: center -50px;
} 
