Html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="js/jquery-3.2.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<div class="title">
关雎
</div>
<div class="content">
<p>关关雎鸠，在河之洲。窈窕淑女，君子好逑。</p>
<p>参差荇菜，左右流之。窈窕淑女，寤寐求之。</p>
<p>求之不得，寤寐思服。悠哉悠哉，辗转反侧。</p>
<p> 参差荇菜，左右采之。窈窕淑女，琴瑟友之。</p>
<p>参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。</p>
</div>
</div>
</body>
</html>
Css部分
* {
margin: 0;
padding: 0;
}
#box{
width: 370px;
margin: 200px auto;
}
.title {
background-color: #EEEEEE;
border: 1px solid #F1F1F1;
height: 30px;
line-height: 30px;
text-align: center;
}
.content {
border: 1px solid #F1F1F1;
display: none;
text-align: center;
}
Jquery部分
$(function() {
$(".title").mouseover(function() {
$(this).css('cursor', 'pointer');
});
/* 方法一：
//设置一个变量 flag 用于标记元素状态，是“滑下”还是“滑上”
var flag = 0;
$(".title").click(function () {
if (flag == 0) {
$(".content").slideDown();
flag = 1;
}else {
$(".content").slideUp();
flag = 0;
}
}); */
//方法二：
$(".title").click(function() {
$(".content").slideToggle();
});
})
