jquery 控制文字域展开收起

前端工作中，经常会遇到内容过多，需要用户点击按钮来控制内容的展开和缩放。最近刚好在项目中遇到，所以就简单的做个总结，把demo附上，希望对大家有个思路上的引导。废话不多少，开搞！

首先我们先来确认要实现的功能:

如果文字过多，则截取后保留三行文字，字数45个以内，并以省略号结尾。点击按钮，第一次点击展开全部内容，再次点击收起内容;

如果字数小于等于45，则全部展示，隐藏点击按钮。

贴上基础HTML和css代码

<style type="text/css">
        .didi_content{
        width: 300px;
        margin: 0px auto;
        background: #fff;
        border-radius: 3px;
        box-shadow: 0px 0px 3px 1px rgba(0,0,0,.1);
        margin-top: 12px;
        padding-bottom: 30px;
        padding:30px;
        opacity: 0;
        }

        .didi_content p{
            line-height: 22px;
            letter-spacing:0.2px;
        }

        .didi_user_question{
            color: #666666;
            overflow : hidden;
        }

        .didi_button{
            font-size: 1.2rem;
            color: #e5e5e5;
            float: right;
            margin-right: 1%;
            padding-right: 15px;
            cursor: pointer;
        }
</style>

需要注意的一点是，我在页面加载的时候将最外层容器”didi_content“的"opacity"值默认0，是为了防止加载页面时出现的闪烁BUG。

原因是在没有执行js的时候，内容是全部显示在页面上的，导致容器高度不一致。

<div class="didi_content">
        <p class="didi_user_question">
            一次自己在家门口用滴滴打车叫了一辆顺风车，刚下单就有两个师傅抢单，结果最后打电话确认时，那位抢单的师傅却告诉他，自己还在几十公里之外的弓村。  先生说，能因为经验不足，有些司机“隔着一座山也要接单”，没有限制地乱抢单却无法及时到达，耽误的是消费者的时间精力。另一位居民陈小姐吐槽的则是许多            顺风车师傅的认路能力。“五次中有三次，都是顺风车师傅走错路或是绕了很大一个
        </p>
        <div class="didi_button">展开全部</div>
</div>

贴上JS代码

接下来，我们来实现功能， 首先要引入zepto <script type="text/javascript" src="http://static.xiaojukeji.com/didialift/hybrid/js/zepto.js"></script>，jq和zepto都可以，视情况而定。

    function textstr(obj,btn){
        var initFontNum = 62;    //初始化字数限制
        var initTextHeight = 66; // 初始化高度px

        var didiText = $(obj).text(); //获取完整内容
        var didiHeight = $(obj).height(); //获取完整内容时容器高度

        if(didiText.length >= initFontNum && didiHeight > initTextHeight){
            $(obj).text($(obj).text().substring(0,initFontNum)); //将内容截取到限制长度
            $(obj).html($(obj).html()+'......'); //截取后的内容以省略号结尾
            $('.didi_content').css({  //显示最外层容器
                'opacity' : '1'
            });
            $(obj).css({ 
                'height':initTextHeight + 'px',
            });
            $(btn).click(function(){
                var curText = $(obj).text(); //截取后的内容
                if(curText.length == 68){
                    $(obj).css({
                        'height' : didiHeight + 'px' ,
                        '-moz-transition' : '0.6s',
                        '-webkit-transition' : '0.6s',
                        'transition' : '0.6s'
                    });
                    $(btn).text('收起');
                    $(obj).text(didiText); 
                }else{
                    $(obj).css({
                        'height': initTextHeight + 'px',
                        '-moz-transition' : '0.6s',
                        '-webkit-transition' : '0.6s',
                        'transition' : '0.6s'
                    });
                    $(btn).text('展开');
                    setTimeout(function(){
                        $(obj).text($(obj).text().substring(0,initFontNum));
                        $(obj).html($(obj).html()+'......');
                    },500)
                }
                return false;
            });    
        }else{
            $(btn).hide();
            $('.didi_content').css({
                'opacity' : '1'
            });
        }
    };
    textstr('.didi_user_question','.didi_button');