jquery文本折叠

/**
 * Created by dongdong on 2015/4/28.
 */
(function($){
    var defaults = {
        height:40, //文本收起后的高度
        speed:'normal', //文本收起和展开的速度
        down:{"class":"fold-down","text":"展开"}, //展开的样式
        up:{"class":"fold-up","text":"收起"} //收起的样式
    };
    $.fn.accordionText = function(options){
        options = $.extend(defaults,options);
        return this.each(function(){
            var c = $(this);
            var h = c.height();
            console.log(h);
            var ph = parseInt(c.css("padding-top").replace("px","")) + parseInt(c.css("padding-bottom").replace("px",""));
            $(this).css({overflow:"hidden",height:options.height + ph + "px"});

            $("#"+$(this).data('switch')).data('toggle', 'down').on('click', function(){
                if ($(this).data('toggle') == 'down') {
                    $(this).text(options.up.text)
                        .removeClass(options.down.class)
                        .addClass(options.up.class);
                    c.animate({height:h+ph + "px"},options.speed);
                    $(this).data('toggle', 'up');
                } else {
                    $(this).text(options.down.text)
                        .removeClass(options.up.class)
                        .addClass(options.down.class);
                    c.animate({height:options.height+ph + "px"},options.speed);
                    $(this).data('toggle', 'down');
                }
            })
            .text(options.down.text)
            .addClass(options.down.class);
        });
    }
})(jQuery);

调用(这里使用了bootstrap的图标样式)：

        $(function(){
            $(".text").accordionText({
                down:{"class":"glyphicon glyphicon-chevron-down","text":""},
                up:{"class":"glyphicon glyphicon-chevron-up","text":""}
            });
        });

html:

<style type="text/css">
        .switch{text-align: center; cursor:pointer;height: 20px; line-height: 20px;}
        .text{ padding: 3px;}
    </style>
<div>
    <div class="text bg-success" data-switch="btn2">
        苏打绿开飞机上来看地方就是领导看见菲利克斯减肥路口交水电费路口就是路口附苏打绿开
        飞机上来看地方就是领导看见菲利克斯减肥路口交水电费路口就是路口附苏打绿开飞机上来
        看地方就是领导看见菲利克斯减肥路口交水电费路口就是路口附苏打绿开飞机上来看地方就
        是领导看见菲利克斯减肥路口交水电费路口就是路口附近是考虑到解放路快睡觉打疯了快圣
        诞节路口四季度菲利克斯江东父老可接受的李开复就是的离开飞机失联都快放假顺路快递减
        肥索拉卡点击法律考试大姐夫流口水的减肥两款手机打发两款手机费路口睡觉的弗兰克交水
        电费路口就是的离开飞机上来看点击
    </div>
    <div class="switch"><span id="btn2"></span></div>
</div>

下载