Jquery切换图标显示越来越少

Posted 2023-04-12

【中文标题】Jquery切换图标显示越来越少

【英文标题】：Jquery toggle icons on show more and less

【发布时间】：2019-10-06 17:43:42

【问题描述】：

我正在使用https://github.com/jasonujmaalvis/show-more 在移动设备上显示和隐藏文本。我想要做的是在显示更多和显示更少的图像之间切换：

到目前为止，我有：

jquery：

源文件：

;

(function($, window, document, undefined) 

    'use strict';

    var pluginName = 'showmore',
        defaults = 
            closedHeight: 100,
            buttonTextMore: 'show more',
            buttonTextLess: 'show less',
            buttonCssClass: 'showmore-button',
            animationSpeed: 0.5,
            openHeightOffset: 0,
            onlyWithWindowMaxWidth: 0
        ;

    function Plugin(element, options) 
        this.element = element;
        this.settings = $.extend(, defaults, options);
        this._defaults = defaults;
        this._name = pluginName;
        this.btn;
        this.init();
    

    $.extend(Plugin.prototype, 
        init: function() 
            if (this.settings.onlyWithWindowMaxWidth > 0) 
                this.bindResize();
                this.responsive();                
             else 
                this.showmore();
            
        ,
        bindResize: function() 
            var self = this;
            var resizeTimer;
            $(window).on('resize', function() 
                if (resizeTimer) 
                    clearTimeout(resizeTimer);
                
                resizeTimer = setTimeout(function() 
                    self.responsive();
                , 250);
            );
        ,
        responsive: function() 
            if ($(window).innerWidth() <= this.settings.onlyWithWindowMaxWidth) 
                this.showmore();
             else 
                this.remove();
            
        ,
        showmore: function() 

            if (this.btn) 
                return;
            

            var self = this;
            var element = $(this.element);
            var settings = this.settings;

            if (settings.animationSpeed > 10) 
                settings.animationSpeed = settings.animationSpeed / 1000;
            

            var showMoreInner = $('<div />', 
                'class': settings.buttonCssClass + '-inner more',
                text: settings.buttonTextMore
            );
            var showLessInner = $('<div />', 
                'class': settings.buttonCssClass + '-inner less',
                text: settings.buttonTextLess
            );

            element.addClass('closed').css(
                'height': settings.closedHeight,
                'overflow': 'hidden'
            );

            var resizeTimer;
            $(window).on('resize', function() 
                if (!element.hasClass('closed')) 
                    if (resizeTimer) 
                        clearTimeout(resizeTimer);
                    
                    resizeTimer = setTimeout(function() 
                        // resizing has "stopped"
                        self.setOpenHeight(true);
                    , 150); // this must be less than bindResize timeout!
                
            );

            var showMoreButton = $('<div />', 
                'class': settings.buttonCssClass,
                html: showMoreInner
            );

            showMoreButton.on('click', function(event) 
                event.preventDefault();
                if (element.hasClass('closed')) 
                    self.setOpenHeight();
                    element.removeClass('closed');
                    showMoreButton.html(showLessInner);
                 else 
                    element.css(
                        'height': settings.closedHeight,
                        'transition': 'all ' + settings.animationSpeed + 's ease'
                    ).addClass('closed');
                    showMoreButton.html(showMoreInner);
                
            );
            element.after(showMoreButton);
            this.btn = showMoreButton;
        ,

        setOpenHeight: function(noAnimation) 
            $(this.element).css(
                'height': this.getOpenHeight()
            );
            if (noAnimation) 
                $(this.element).css(
                    'transition': 'none'
                );    
             else 
                $(this.element).css(
                    'transition': 'all ' + this.settings.animationSpeed + 's ease'
                );    
            
        ,

        getOpenHeight: function() 
            $(this.element).css('height': 'auto', 'transition': 'none');
            var targetHeight = $(this.element).innerHeight();
            $(this.element).css('height': this.settings.closedHeight);
            // we must call innerHeight() otherwhise there will be no css animation
            $(this.element).innerHeight();
            return targetHeight;
        ,

        remove: function() 
            // var element = $(this.element);
            if ($(this.element).hasClass('closed')) 
                this.setOpenHeight();
            
            if (this.btn) 
                this.btn.off('click').empty().remove();
                this.btn = undefined;
            
        
    );

    $.fn[pluginName] = function(options) 
        return this.each(function() 
            if (!$.data(this, 'plugin_' + pluginName)) 
                $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
            
        );
    ;

)(jQuery, window, document);

我的 Jquery：

$('.read-more').showmore(
    closedHeight: 100,
    shadow: true,
    onlyWithWindowMaxWidth: 576,
    buttonCssClass: 'showmore-button',
    buttonTextLess: 'Read less',
    buttonTextMore: 'Read more'
);

CSS

.home-text .showmore-button 
    margin-bottom: 25px;
    background-image: url('../assets/images/plus-octagon-light.svg')!important;
    background-repeat: no-repeat;
    width: 150px;
    padding-left: 40px;
    height: 30px;
    display: block;


.home-text .showmore-button::active 
    margin-bottom: 25px;
    background-image: url('../assets/images/minus-octagon-light.svg')!important;
    background-repeat: no-repeat;
    width: 150px;
    padding-left: 40px;
    height: 30px;
    display: block;


.read-more  line-height:24px; 
.read-more_content  position:relative; overflow:hidden;           
.read-more_trigger  width:100%; height:45px; line-height:45px; cursor:pointer; 
.read-more_trigger span  display:block; 

html

<div class="home-text"><p>xxxxxxxx</p>
</div>

所以我试图在显示更多和显示更少的图标之间切换。有任何想法吗？我知道如果我将 Jquery 用作独立函数，我可以使用切换类，但由于这是一个 JS 插件，我正在考虑在哪里添加它？

【参考方案1】：

在查看更多 JQuery 代码后，对我有用的解决方案是使用以下类更改 CSS：

.showmore-button-inner.more 
    margin-bottom: 25px;
    background-image: url('../assets/images/plus-octagon-light.svg')!important;
    background-repeat: no-repeat;
    width: 150px;
    padding-left: 40px;
    height: 30px;
    display: block;


.showmore-button-inner.less 
    margin-bottom: 25px;
    background-image: url('../assets/images/minus-octagon-light.svg')!important;
    background-repeat: no-repeat;
    width: 150px;
    padding-left: 40px;
    height: 30px;
    display: block;