javascript实现一段文字展开、收起（默认收起）

html:

<div id="content">
2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。
</div>

CSS：

<style>
#content {
width: 500px;
background-color: #ccc;
line-height: 26px;
}
a {
text-decoration: none;
color: red;
}
</style>

javascript：

<script>
function init(){
var len = 60; //默认显示字数
var ctn = document.getElementById("content"); //获取div对象
var content = ctn.innerHTML; //获取div里的内容

//alert(content);
var span = document.createElement("span"); //创建<span>元素
var a = document.createElement("a"); //创建<a>元素
 span.innerHTML = content.substring(0,len); //span里的内容为content的前len个字符

 a.innerHTML = content.length>len?"... 展开":""; ////判断显示的字数是否大于默认显示的字数 来设置a的显示 
 a.href = "javascript:void(0)";//让a链接点击不跳转

 a.onclick = function(){
if(a.innerHTML.indexOf("展开")>0){ //如果a中含有"展开"则显示"收起"
 a.innerHTML = "<<&nbsp;收起";
 span.innerHTML = content;
 }else{
 a.innerHTML = "... 展开";
 span.innerHTML = content.substring(0,len);
 }
 }
// 设置div内容为空，span元素 a元素加入到div中
 ctn.innerHTML = "";
 ctn.appendChild(span);
 ctn.appendChild(a);
 }
</script>

以上就是实现展开、收起效果的代码。

如果不用箭头符号来表示，而是以图片形式来展示那么就使用下面代码替换相应代码：

a.innerHTML = content.length>len?"<img src='images/right.png' width='15' height='15' />展开":"";  //设置a的显示

秒客网

javascript实现一段文字展开、收起（默认收起）

相关文章