码迷,mamicode.com
首页 > Web开发 > 详细

jquery文本折叠

时间:2015-04-28 13:54:45      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:

/**
 * 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),
                h  = c.height(),
                ph = parseInt(c.css("padding-top").replace("px",""))+parseInt(c.css("padding-bottom").replace("px","")),
                t  = $("#"+$(this).data(‘switch‘));
            c.css({overflow:"hidden",height:options.height + ph + "px"});
            t.toggle(
                function(){
                    $(this).text(options.up.text)
                           .removeClass(options.down.class)
                           .addClass(options.up.class);
                    c.animate({height:h+ph + "px"},options.speed);
                },
                function(){
                    $(this).text(options.down.text)
                           .removeClass(options.up.class)
                           .addClass(options.down.class);
                    c.animate({height:options.height+ph + "px"},options.speed);
                }
            ).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>

 下载

jquery文本折叠

标签:

原文地址:http://www.cnblogs.com/xiaodo0/p/4462610.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!