有志者事竟成。

下拉展开动画 

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

 

posted on 2019-09-02 13:49  阿长*长  阅读(270)  评论(0)  编辑  收藏  举报

导航