2021-06-01

最新推荐文章于 2025-08-14 23:09:34 发布
原创最新推荐文章于 2025-08-14 23:09:34 发布 · 145 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#css3 #jquery #html #html5
jq h5页面_展开收起

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://r.img.cctvpic.com/photoAlbum/templet/js/jquery-1.7.2.min.js"></script>
    <style>
         @media screen and (min-device-width: 300px) and (max-device-width: 765px) {
            /* 全局 CSS 定义 */
            html, body, div, span, applet, object, iframe,
            h1, h2, h3, h4, h5, h6, p, blockquote, pre,
            a, abbr, acronym, address, big, cite, code,
            del, dfn, em, img, ins, kbd, q, s, samp,
            small, strike, strong, sub, sup, tt, var,
            b, u, i, center,
            dl, dt, dd, ol, ul, li,
            fieldset, form, label, legend,
            table, caption, tbody, tfoot, thead, tr, th, td,
            article, aside, canvas, details, embed,
            figure, figcaption, footer, header, hgroup,
            menu, nav, output, ruby, section, summary,
            time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
            box-sizing: border-box;
            outline: none;
            }
            /* HTML5 display-role reset for older browsers */
            article, aside, details, figcaption, figure,
            footer, header, hgroup, menu, nav, section {
            display: block;
            }
            body {
            line-height: 1;
            /* min-width: 1280px; */
            }
            ol, ul {
            list-style: none;
            }
            blockquote, q {
            quotes: none;
            }
            blockquote:before, blockquote:after,
            q:before, q:after {
            content: '';
            content: none;
            }
            table {
            border-collapse: collapse;
            border-spacing: 0;
            }
            .clearfix:after, .clearfix:before{
            content: "";
            display: table;
            }
            .clearfix:after{
            clear: both;
            }
            .clearfix{
            *zoom: 1;
            }
            input {
                height: 52px;
                border-radius: 5px;
                border: 1px solid #EEEEEE;
            }
            input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
            -webkit-box-shadow: 0 0 0px 1000px #fff inset;
            }
            button {
                background: #2F7DE2;
                border-radius: 5px;
                color: white;
                border: none;
                cursor: pointer;
            }
            body,
            html {
                width: 100%;
            }
        .wenziaaa{
            padding: 0 .15rem;
            margin: .23rem 0 0 0;
        }
        h5{
                font-size: .16rem;
                font-family: PingFangSC-Semibold, PingFang SC;
                line-height: .22rem;
               
            }
        .wenziaaa h5 img{
                    display: none;
                }
            p{
                font-size: .14rem;
                font-family: PingFangSC-Regular, PingFang SC;
                line-height: .26rem;
                margin-top: .15rem;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                margin-bottom: .08rem;
            }
            .overflowno{
                -webkit-line-clamp: inherit;
            }
            .seemore{
                font-size: .12rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
                line-height: .18rem;
                text-align: right;
                margin-bottom: .23rem;
                
            }
           .seemore img{
                    transform: rotate(180deg);
            }
            .shouqi{
                font-size: .12rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
                line-height: .18rem;
                text-align: right;
                margin-bottom: .23rem;
                display: none;
            }
    }
    </style>
</head>
<body>
    <div class="wenziaaa" data-spm="EAlBWxa7ErWB">

                <h5>国家大剧院原创中国史诗歌剧《长征》<img src="https://p5.img.cctvpic.com/photoAlbum/templet/common/TPTE0UCXH087j1GUpQyoEbrs210125/titleicon.png" width="17px" height="17px" alt=""> </h5>
                <p class="jishao">　　新中国成立70周年之际，国家大剧院原创中国史诗歌剧《长征》再度归来。歌剧《长征》以磅礴雄浑，同时又充满革命浪漫主义情怀的音乐，兼具史诗感与当代审美的舞台呈现，忠实再现了红军长征征途上那些重要的历史节点性事件。著名指挥家张弦执棒国家大剧院管弦乐团、合唱团，携手阎维文、王宏伟、王喆、龚爽、李扬、黄训国等多位国内著名歌唱家和王海涛、关致京等优秀的国家大剧院驻院歌剧演员，与山西省吕梁市民间艺术团的演员们一起，为观众再现了不怕牺牲、为理想艰苦奋斗的长征英雄群像。
                </p>
                <p class="seemore">查看更多 <img src="https://p2.img.cctvpic.com/photoAlbum/templet/common/TPTE0UCXH087j1GUpQyoEbrs210125/shouqi.png" alt=""></p>
                <p class="shouqi">收起介绍 <img src="https://p2.img.cctvpic.com/photoAlbum/templet/common/TPTE0UCXH087j1GUpQyoEbrs210125/shouqi.png" alt=""></p>
    </div>
</body>
<script>
      // 移动端适配
    let isShowH5Page =false
    var isIphoe = /AppleWebKit.*mobile/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))
    if(isIphoe && document.documentElement.clientWidth < 768) {
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.75  + 'px';
        isShowH5Page = true
    }
     // h5 判断
     if(isShowH5Page == true){ 
            $('.seemore').show()
            $('.seemore').click(function(){
                $(this).prev('.jishao').addClass('overflowno')
                $(this).hide()
                $('.shouqi').show()
            })
            $('.shouqi').click(function(){
                $('.jishao').removeClass('overflowno')
                $(this).hide()
                $('.seemore').show()
            })
        } else {
            $('.seemore').hide()
            $('.shouqi').hide()
        }
</script>
</html>