查看更多-商品折叠样式

<div>
    <!--
/*
    使用说明：
    1.在三列商品标题设置->促销语处填写cMore
    2、在页面最底端拖入次模块
*/
-->
    <style>
        /* n+2 为露出行数，这里表示露出1行，若需要露出两行为n+3以此类推 */
        .cMore .flexgrid:nth-child(n+2) {
            display: none;
        }
        .c-moreBtn {
            margin-top: -2vw;
        }
        /* 展开区域背景 */
        .c-moreBtn .xkgd-btn {
            height: 1.25rem;
            width: auto;
            margin: 0;
            background: url(https://gfs6.gomein.net.cn/wireless/T19s_kB5Zv1RCvBVdK_576_98.png);
            background-size: 100%;
            background-repeat: no-repeat;
            color: #333333;
        }
        .c-moreBtn .xkgd-btn svg {
            width: 4vw;
            height: 4vw;
            display: inline-block;
            vertical-align: middle;
            margin-left: 2vw;
        }
        /* 商品样式框 */
        .cMore .list.col3.product-list .flexgrid .product {
            width: 2.3rem;
            height: 3.45rem;
            background-color: transparent;
            background: url(https://gfs5.gomein.net.cn/wireless/T17tdABXYT1RCvBVdK_333_481.png)no-repeat;
            background-size: 100%;
            left: 0.051rem;
            top: 0.12rem;
        }
        .cMore .list.col3.product-list .flexgrid .product:nth-child(2) {
            left: 0rem;
        }
        .cMore .list.col3.product-list .flexgrid .product:last-child {
            left: -.06rem;
        }
        /* 商品背景条 */
        .cMore .list.col3.product-list {
            margin: 0.1rem 0.2rem 0;
            margin-left: 0;
            margin-right: 0;
            padding: 0.3rem;
            padding-top: 0.13rem;
            margin-top: 0;
            border-radius: 0 0 0.16rem 0.16rem;
            background: url(https://gfs5.gomein.net.cn/wireless/T1iWDkBTYT1RCvBVdK_576_256.png);
            background-size: 100%;
        }
        .cMore .list.col3.product-list .product .container.img {
            margin: 0;
            margin-top: 0.06rem;
            width: 2.14rem;
            height: 2.06rem;
            margin-left: -0.05rem;
        }
        .cMore .list.col3.product-list .product .container.img img {
            width: 2.14rem;
            height: 2.06rem;
            border-radius: 0.1rem;
        }
        .cMore .list.col3.product-list .blocker .container.img,
        .list.col3.product-list .product .container.img {
            margin: 0.1rem 0 0.14rem;
            border-radius: 0.06rem;
            overflow: hidden;
            width: 2.14rem;
            height: 2.14rem;
            margin-left: -0.03rem;
        }
        .cMore .list.col3 .product .container.content .promotion {
            font-size: .2rem;
            color: #ff8d00;
            margin: 0.12rem 0 0;
            min-height: 0.3rem;
            line-height: .3rem;
            overflow: hidden;
            margin-bottom: 0.05rem;
            display: none;
        }
        .cMore .list.col3 .product .container.content .name {
            color: #c21500;
            font-size: .24rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            overflow: hidden;
            height: 0.3rem;
            line-height: .3rem;
            margin-bottom: 0.07rem;
            margin-top: 0.13rem;
            width: 1.8rem;
            margin-left: 0.1rem;
        }
        .cMore .list.col3 .product .container.content .desc .price .zhenxuan img {
            width: 0.72rem;
            height: 0.24rem;
            margin-top: 0.08rem;
            display: none;
        }
        .cMore .list.col3 .product .container.content .desc .price .originPrice {
            font-size: .2rem;
            color: #919599;
            text-decoration: line-through;
            margin-top: -0.04rem;
            margin-bottom: -0.07rem;
            float: left;
            height: 0.3rem;
            display: none;
        }
        .cMore .list.col3 .product .container.content .desc .price strong span>span {
            color: #ffffff;
            float: left;
            margin-top: 0.01rem;
            margin-left: 0.45rem;
            font-size: 0.25rem;
            font-weight: 400;
            font-family: PingFangSC-Semibold;
        }
        .cMore .list.col3 .product .container.content .desc .price strong span {
            color: #ffffff;
            float: left;
            margin-top: 0.05rem;
            font-size: 0.26rem;
            font-family: PingFangSC-Semibold;
        }
        .cMore .list.col3 .product .container.content .desc .price strong {
            display: block;
            font-size: .32rem;
            font-weight: bolder;
            line-height: .4rem;
            margin-left: 0.18rem;
            height: 0.4rem;
        }
        .cMore.cms:not(.first) {
            margin-top: -0.2rem;
        }
        .list.col3 .product .container.content .desc .price .vip99-price {
            display: none;
        }
    </style>
    <script>
        var _len = $(".c-moreBtn").length;
        $(".cMore").each(function (e) {
            if (_len >= 1) { return; }
            var moreNum = $(this).attr("templetid");
            $(this).after(`<div class="c-moreBtn" more-num=${moreNum}><div class="xkgd-btn"> 
</div></div>`);
        })
        setTimeout(function () {
            $(".c-moreBtn").each(function (e) {
                let targetNum = $(this).attr("more-num");
                let temp = 3, _len = 0;
                let _on = 1;
                $(this).click(function (event) {
                    _len = $(`div[templetid="${targetNum}"].cMore .flexgrid`).length;
                    if (_on) {
                        temp += 3;
                        $(`div[templetid="${targetNum}"].cMore .flexgrid:nth-child(-n+${temp}`).css("display", "flex !important");
                        if (temp >= _len) {
                            $(this).find(".xkgd-btn").html(``);
                            _on = 0;
                        }
                    } else {
                        // n+2展开后再收起显示行数，这里表示露出1行，若需要露出两行为n + 3以此类推
                        $(`div[templetid="${targetNum}"].cMore .flexgrid:nth-child(n+2`).css("display", "none !important");
                        $(this).find(".xkgd-btn").html(``);
                        _top = $(this).offset().top - $(`div[templetid="${targetNum}"]`).height() / 2;
                        window.scrollTo({ top: _top, behavior: "instant" });
                        temp = 3;
                        _on = 1;
                    }
                });
            })
        }, 2000)
    </script>
</div>