<!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>