下拉展开动画

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

 

上一篇:企查猫app数据解密


下一篇:flowable 数据库表结构