<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>下拉展开动画</title>
<style type="text/css">
/*头部*/
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body {
background: #f4f4f4;
height: 100%;
}
.container {
max-width: 750px;
min-width: 32px;
margin: 0 auto;
background: #f4f4f4;
}
.con_ul {
padding: 0;
margin: 0;
overflow: auto;
background: #FFFFFF;
}
.con_ul li {
list-style: none;
}
.con_ul li .title {
background-position: 100% 0px;
background-repeat: no-repeat;
position: relative;
background: #3CC51F;
line-height: 50px;
min-height: 50px;
color: #FFFFFF;
text-align: center;
}
.con_ul li .title.act {
background-position: 100% 0px;
background-repeat: no-repeat;
}
.con {
background-color: #FFFFFF;
display: none;
padding: 5px;
margin: 10px 0;
}
.listimg {
margin: 5px 0;
display: inline-block;
margin-bottom: 5px;
}
p{
text-indent: 24px;
}
</style>
</head>
<body ontouchstart>
<div class="container">
<ul class="con_ul">
<li>
<div class="title">将进酒</div>
<div class="con">
<div class="listimg">
<p>君不见，黄河之水天上来⑵，奔流到海不复回。</p>
<p>君不见，高堂明镜悲白发，朝如青丝暮成雪⑶。</p>
<p>人生得意须尽欢⑷，莫使金樽空对月。</p>
<p>天生我材必有用，千金散尽还复来。</p>
<p>烹羊宰牛且为乐，会须一饮三百杯⑸。</p>
<p>岑夫子，丹丘生⑹，将进酒，杯莫停⑺。</p>
<p>与君歌一曲⑻，请君为我倾耳听⑼。</p>
<p>钟鼓馔玉不足贵⑽，但愿长醉不复醒⑾。</p>
<p>古来圣贤皆寂寞，惟有饮者留其名。</p>
<p>陈王昔时宴平乐，斗酒十千恣欢谑⑿。</p>
<p>主人何为言少钱⒀，径须沽取对君酌⒁。</p>
<p>五花马⒂，千金裘，呼儿将出换美酒，与尔同销万古愁</p>
</div>
</div>
</li>
<li>
<div class="title" style="background: #10AEFF;">兰亭集序 / 兰亭序</div>
<div class="con">
<div class="listimg">
<p>永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹；又有清流激湍，映带左右，引以为流觞曲水，列坐其次。虽无丝竹管弦之盛，一觞一咏，亦足以畅叙幽情。</p>
<p>是日也，天朗气清，惠风和畅，仰观宇宙之大，俯察品类之盛，所以游目骋怀，足以极视听之娱，信可乐也。</p>
<p>夫人之相与，俯仰一世，或取诸怀抱，悟言一室之内；或因寄所托，放浪形骸之外。虽趣舍万殊，静躁不同，当其欣于所遇，暂得于己，
快然自足，不知老之将至。及其所之既倦，情随事迁，感慨系之矣。向之所欣，俯仰之间，已为陈迹，犹不能不以之兴怀。况修短随化，终期于尽。
古人云：“死生亦大矣。”岂不痛哉！(不知老之将至 一作：曾不知老之将至)</p>
<p>每览昔人兴感之由，若合一契，未尝不临文嗟悼，不能喻之于怀。固知一死生为虚诞，齐彭殇为妄作。后之视今，亦犹今之视昔。悲夫！故列叙时人，录其所述，虽世殊事异，所以兴怀，其致一也。后之览者，亦将有感于斯文。</p>
</div>
</div>
</li>
</ul>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$('.con_ul').on('click', '.title', function() {
$(this).toggleClass('act');
$(this).next().slideToggle();
console.log($(this).hasClass("act"))
if($(this).hasClass("act")) {
console.log('展开')
} else {
console.log('合住')
}
})
</script>
</html>