jQuery实现长文字部分显示

最新推荐文章于 2024-09-19 11:17:39 发布

呼呼猪

最新推荐文章于 2024-09-19 11:17:39 发布

阅读量1.1k

点赞数

文章标签： jQuery javascript

本文链接：https://blog.csdn.net/tuantuanls/article/details/8920670

版权

在网页上只有一个小区域，但是说明性的文字又很长，下面这段脚本实现的是长文字的部分显示。

当用户点击展开时，文字展开，合起是文字合起。

本来用jQuery自带的toggle()就可以写，但是我做的时候 toggle一直不work，所以就用了click + 标志位来做的

<script language="javascript" src="jquery.js"></script>  
<script language="javascript">

var cur_status = "less";

$.extend({
    show_more_init:function(){
        //alert("show_more_init!");
        var charNumbers=$(".content").html().length;//总字数  
        var limit=100;//显示字数  
        if(charNumbers>limit)  
        {  
            var orgText=$(".content").html();//原始文本  
            var orgHeight=$(".content").height();//原始高度  
              
            var showText=orgText.substring(0,limit);//最终显示的文本  
            $(".content").html(showText);  
            var contentHeight=$(".content").height();//截取内容后的高度 

            $(".switch").click(        
                function() {
                    if(cur_status == "less"){
                        $(".content").height(contentHeight).html(orgText).animate({ height:orgHeight}, { duration: "slow" });   
                        $(this).html("合起");
                        cur_status = "more";
                    }else{
                        $(".content").height(orgHeight).html(showText).animate({ height:contentHeight}, { duration: "fast" });   
                        $(this).html("展开");
                        cur_status = "less";
                    }

                }
     
            );
           
        }  
        else  
        {  
            $(".switch").hide();  
        }  
    }
});

$(document).ready(function(){ 
     
    $.show_more_init();

});

</script>  

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>test</title> 

<style>  
#limittext{ 
    width:640px; 
    height:auto; 
    position:relative; 
    background-color:#ccc; 
    color:black;
}  
   
 .switch{  
        font-size:12px; 
        text-align:center; 
        cursor:pointer; 
        font-family:Verdana; 
        font-weight:800; 
        position:absolute; 
        bottom:0;  
        width:100%;
        /*background:url(more-bg.png) repeat-x bottom;*/
        height:40px; 
        line-height:80px;
    }  
   
</style> 
 
</head>  
<body> 

<div id="limittext" >  
    <div class="content" style="padding-bottom:15px;">
    这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字

    </div>  
    <div class="switch">展开</div>         
</div> 



</body>  
</html>