Question

我正在使用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用作独立的函数，但可以使用toggle类，但是因为这是一个JS插件，因此我想在哪里添加它？

Answer 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;
}

jQuery切换图标越来越少显示

1 个答案: