javascript “阅读更多”链接以显示全文

Posted 2021-05-03

export { Readmore };

const $ = jQuery.noConflict();

const Readmore = {

    // check to see if current panel is open or not
    init(elClass = '.js-readmore') {
        
        // add required styles
        $(elClass).css({
            'overflow': 'hidden',
            'transition': 'height .75s ease'
        });
    

        // get the height in PX of the first element within the elClass (usually .js-readmore)
        const closedheight = $(elClass + " > *:first").outerHeight(true);        
        const openheight = $(elClass).outerHeight(true);
        
        
        // wrap elClass
        $(elClass).wrap('<div class="js-readmore-wrap"></div>');

        // set to height of first paragraph
        $(elClass).css('height', closedheight);


        // add class to set status to closed
        $(elClass).addClass('js-readmore--closed');

        // add show more link
        $(elClass).after('<span class="read-more-link">Read More</span>');

        // create Read More click handler
        $('.js-readmore-wrap').on('click', '.read-more-link', function () {
            
            // select the readmore class that was clicked
            const thisClickedReadMore = $(this).siblings(elClass);

            if ( thisClickedReadMore.hasClass('js-readmore--closed') ){

                // add class to set status to open
                $(thisClickedReadMore).addClass('js-readmore--open');

                // set the height
                $(thisClickedReadMore).css('height', openheight);

                // remove closed class
                $(thisClickedReadMore).removeClass('js-readmore--closed');

                // remove the read more link
                $(this).remove(".read-more-link");
            }
            
        });


    }

}