jquery 文本超出隐藏 关闭展开

来源:互联网 发布:好看的娱乐圈文 知乎 编辑:程序博客网 时间:2024/05/22 14:42
<div class="content">
    <div class="con">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
    <span class="more">展开</span>
    
</div>
<script>
$(function(){
    $(".content").each(function(){
        var targetEle = $(this).find(".con").first();
        var btnCtrl = $(this).find(".more").last();
        var strAll = targetEle.text();   
        if (strAll.length >30)
        {
            var sonStr = strAll.substr(0,30);
            targetEle.text(sonStr)
            btnCtrl.click(function(){
                if (btnCtrl.text().substr(0,5)=="展开")
                {
                    targetEle.text(strAll);
                    btnCtrl.text("关闭");
                }
                else{
                    targetEle.text(sonStr)
                    btnCtrl.text("展开");
                }         
            });
        }
        else{btnCtrl.text("");}   
    });
 });
</script>

原创粉丝点击