常用组件系列(4),详情内容展开隐藏

64 阅读3分钟

直接上效果

QQ2024712-11114.gif

逻辑

html部分

用一个元素把想要折叠显示的内容包裹就好了,下面是html代码

<ol class="pro-describe describe descfover">
    <li class="d-describe-li">Embrace Home Body Sculpting: Tired of the hassle of scheduling appointments and waiting at beauty salons for body contouring? 
        If you're seeking a convenient and cost-effective alternative, our 5-in-1 cavitation machine allows you to sculpt your body from 
        the comfort of your home.</li>
    <li  class="d-describe-li">Time- and Cost-Saving: Finding it difficult to schedule appointments with beauty salons that fit your busy schedule? Tired of 
        constant investments for your desired body shape? Our body cavitation machine lets you contour and tighten your skin at home,
            whenever it suits you, all for less than $300.</li>
    <li  class="d-describe-li">Achieve Optimal Results: Experience the effectiveness of low-frequency ultrasonic cavitation for your body contouring goals. 
        Optimal results are achieved through 8 to 10 sessions over two months per targeted area, providing efficient outcomes with minimal 
        side effects and no downtime.</li>
    <li  class="d-describe-li">Target Any Body Area: The versatility of this home cavitation machine allows precise sculpting of various body parts, including your 
        face, eyes, neck, arms, waist, buttocks, and thighs.</li>
    <li  class="d-describe-li">More Humanized Design: The upgraded s shape cavitation machine reduces the buzzy sound in your ears by 30% when ultrasound is working.
            The handles can adjust frequency based on your skin's temperature, and the LED light will automatically turn on when in contact with the
            skin. Additionally, the handles feature an anti-skid design.</li>
</ol>
//显示隐藏按钮
<div class="brandsnext"></div>    

css部分

这里有一个注意的地方,就是遮罩部分,如下图

image.png

有点朦胧的感觉,实现方法,就是添加一个伪类,当然也有很多实现方法,我这里的方法就是添加一个伪类,这样既简单又方便。

.descfover{
    position: relative;
}
.descfover::after {
    position: absolute;
    height: 50%;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.75) 54%,#fff);
    clear: both;
    content: " ";
    display: block;
}

js部分

一,计算高度,因为内容是不固定的,有时候会很多,有时候或许会高度不够,这就需要判断
//遍历所有的DOM元素
this.each(function () {
    var $this = $(this);
    var originalHeight = $this.height();

    // 记住原始高度
    $this.data("originalHeight", originalHeight);
    console.log(originalHeight)
    //如果元素的高度超过collapsedHeight,则限制其高度并隐藏溢出的内容,同时在元素后面添加一个View More按钮
    if (originalHeight > settings.collapsedHeight) {
        $this.css({
            "height": settings.collapsedHeight + "px",
            "overflow": "hidden"
        }).addClass("descfover");

        $this.next(".brandsnext").html(
            `<p class='brand-more'><span>${settings.moreText}</span>${settings.moreIcon}</p>`
        );
    }
});
二,监听点击按钮,判断是点击的展开还是收缩
// 绑定点击事件处理函数,监听下面元素内容的点击事件
$(document).on('click', '.brandsnext .brand-more, .brandsnext .brand-less', function () {
    var $that = $(this);
    var $describe = $that.closest(".brandsnext").prev(".describe");
    //如果点击View More按钮时,展开内容,并修改按钮文本和图标
    if ($that.hasClass("brand-more")) {
        // 展开内容
        $describe.css({
            "height": "auto",
            "overflow": "visible"
        }).removeClass("descfover");
        $that.html(`<span>${settings.lessText}</span>${settings.lessIcon}`);
        $that.attr("class", 'brand-less');
    } else {//当点击View Less按钮时,折叠内容,并修改按钮文本和图标
        // 恢复到初始显示高度
        $describe.css({
            "height": settings.collapsedHeight + "px",
            "overflow": "hidden"
        }).addClass("descfover");
        $that.html(`<span>${settings.moreText}</span>${settings.moreIcon}`);
        $that.attr("class", 'brand-more');
    }
});
三,最后对方法进行封装,方便多次调用。
(function ($) {
    //定义一个jquery插件,方便调用
    //optioon参数,是插件的配置参数
    $.fn.toggleDescription = function (options) {
        //console.log(options)
        var settings = $.extend({
            collapsedHeight: 200,//默认高度
            moreText: "View More",//折叠文本
            lessText: "View Less",//显示文本
            moreIcon: "<svg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' viewBox='0 0 24 24' class='caret-icon faq-ione' data-v-c4656e6d=''><path d='M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z'></path></svg>",
            lessIcon: "<svg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' viewBox='0 0 24 24' class='caret-icon faq-ione' data-v-c4656e6d=''><path d='M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z'></path></svg>"
        }, options);
    };
})(jQuery);
四,最后调用
$(document).ready(function () {
    $(".describe").toggleDescription();
});
//或者这样,通过options参数,修改默认设置,可以灵活的适应不同场景的需求。
$(document).ready(function () {
    $(".describe").toggleDescription({
        collapsedHeight:300//默认高度
        moreText: "展开",//折叠文本
        lessText: "隐藏",//显示文本
    });
});

完整代码

<style>
       
    .brand-more,
    .brand-less {
        display: flex;
        align-items: center;
    }
    .brand-more svg{transform: rotate(90deg);}
    .brand-less svg{transform: rotate(-90deg);}
    .brand-more svg,
    .brand-less svg {
        width: 22px;height: 22px;
        fill: #707070;
    }
    .brand-more:hover,
    .brand-less:hover,
    .brand-more:hover svg,
    .brand-less:hover svg {
        cursor: pointer;
        fill: #660099;
        color: #660099;
    }
    .descfover{
        position: relative;
    }
    .descfover::after {
        position: absolute;
        height: 50%;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(180deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.75) 54%,#fff);
        clear: both;
        content: " ";
        display: block;
        font-size: 0;
    }
    .pro-describe li{
        list-style: disc inside;
        padding-bottom: 10px;
        color: #333333;
        font-size: 14px;
    }
</style>
<ol class="pro-describe describe descfover">
        <li class="d-describe-li">Embrace Home Body Sculpting: Tired of the hassle of scheduling appointments and waiting at beauty salons for body contouring? 
            If you're seeking a convenient and cost-effective alternative, our 5-in-1 cavitation machine allows you to sculpt your body from 
            the comfort of your home.</li>
        <li  class="d-describe-li">Time- and Cost-Saving: Finding it difficult to schedule appointments with beauty salons that fit your busy schedule? Tired of 
            constant investments for your desired body shape? Our body cavitation machine lets you contour and tighten your skin at home,
                whenever it suits you, all for less than $300.</li>
        <li  class="d-describe-li">Achieve Optimal Results: Experience the effectiveness of low-frequency ultrasonic cavitation for your body contouring goals. 
            Optimal results are achieved through 8 to 10 sessions over two months per targeted area, providing efficient outcomes with minimal 
            side effects and no downtime.</li>
        <li  class="d-describe-li">Target Any Body Area: The versatility of this home cavitation machine allows precise sculpting of various body parts, including your 
            face, eyes, neck, arms, waist, buttocks, and thighs.</li>
        <li  class="d-describe-li">More Humanized Design: The upgraded s shape cavitation machine reduces the buzzy sound in your ears by 30% when ultrasound is working.
                The handles can adjust frequency based on your skin's temperature, and the LED light will automatically turn on when in contact with the
                skin. Additionally, the handles feature an anti-skid design.</li>
    </ol>
//显示隐藏按钮
<div class="brandsnext"></div>

<script>
    $(document).ready(function () {
        //多余显示隐藏封装
        $(".describe").toggleDescription();
    });
    (function ($) {
        //定义一个jquery插件,方便调用
        //optioon参数,是插件的配置参数
        $.fn.toggleDescription = function (options) {
            //console.log(options)
            var settings = $.extend({
                collapsedHeight: 200,//默认高度
                moreText: "View More",//折叠文本
                lessText: "View Less",//显示文本
                moreIcon: "<svg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' viewBox='0 0 24 24' class='caret-icon faq-ione' data-v-c4656e6d=''><path d='M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z'></path></svg>",
                lessIcon: "<svg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' viewBox='0 0 24 24' class='caret-icon faq-ione' data-v-c4656e6d=''><path d='M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z'></path></svg>"
            }, options);

            //遍历所有的DOM元素
            this.each(function () {
                var $this = $(this);
                var originalHeight = $this.height();

                // 记住原始高度
                $this.data("originalHeight", originalHeight);
                console.log(originalHeight)
                //如果元素的高度超过collapsedHeight,则限制其高度并隐藏溢出的内容,同时在元素后面添加一个View More按钮
                if (originalHeight > settings.collapsedHeight) {
                    $this.css({
                        "height": settings.collapsedHeight + "px",
                        "overflow": "hidden"
                    }).addClass("descfover");

                    $this.next(".brandsnext").html(
                        `<p class='brand-more'><span>${settings.moreText}</span>${settings.moreIcon}</p>`
                    );
                }
            });

            // 绑定点击事件处理函数,监听下面元素内容的点击事件
            $(document).on('click', '.brandsnext .brand-more, .brandsnext .brand-less', function () {
                var $that = $(this);
                var $describe = $that.closest(".brandsnext").prev(".describe");
                //如果点击View More按钮时,展开内容,并修改按钮文本和图标
                if ($that.hasClass("brand-more")) {
                    // 展开内容
                    $describe.css({
                        "height": "auto",
                        "overflow": "visible"
                    }).removeClass("descfover");
                    $that.html(`<span>${settings.lessText}</span>${settings.lessIcon}`);
                    $that.attr("class", 'brand-less');
                } else {//当点击View Less按钮时,折叠内容,并修改按钮文本和图标
                    // 恢复到初始显示高度
                    $describe.css({
                        "height": settings.collapsedHeight + "px",
                        "overflow": "hidden"
                    }).addClass("descfover");
                    $that.html(`<span>${settings.moreText}</span>${settings.moreIcon}`);
                    $that.attr("class", 'brand-more');
                }
            });
            //返回this允许方法链式调用。
            return this;
        };
    })(jQuery);

</script>