js展开收起（折叠）效果 — 一个展开和收起的js代码实现div层的展开和折叠效果

如何实现js展开收起（折叠）效果呢？例如：一段内容过长了，我限制他显示为20个字内，但是超出了20的就先用省略号代替，然后后面添加一个展开，点击展开后就显示所有的内容，这时候展开按钮就变成了 折叠按钮，点击折叠又变成了展开，并且，折叠后又像是20字内了！

下面免费软件之家就分享一下通过JS截取字符串实现展开收起（折叠）的功能！

javascript实现点击查看全文和收起效果代码：一.实现原理:

获取div中的文本内容，然后动态创建一个div和和a对象，如果文章的内容超过指定的字数，那么就会截取指定的 字符串，然后将截取的内容放入创建的div中，a对象中的内容也设置为...显示全部，这样就实现了默认状态的收起效果。当点击显示全部后，会将原来 box中的内容全部放到新创建的div中，并且将a对象中的内容设置为收起。基本就是这个原理实现的此效果。

html

head

meta charset=utf-8

title点击显示全文效果/title

style type=text/css

#box

{

width:680px;

height:200px;

}

/style

script type=text/javascript

function show()

{

var box = document.getElementById(box);

var text = box.innerHTML;

var newBox = document.createElement(div);

var btn = document.createElement(a);

newBox.innerHTML = text.substring(0,20);

btn.innerHTML = text.length20 ? ...显示全部 : ;

btn.href = ###;

btn.onclick = function(){

if(btn.innerHTML == ...显示全部)

{

btn.innerHTML = 收起;

newBox.innerHTML = text;

}

else

{

btn.innerHTML = ...显示全部;

newBox.innerHTML = text.substring(0,20);

}

}

box.innerHTML = ;

box.appendChild(newBox);

box.appendChild(btn);

}

window.onload=function()

{

show();

}

/script

/head

body

div id=box

奇芳阁（原名：三次元世界）是一个分享精品绿色便携软件、实用绿色软件、互联网免费资源下载的绿软分享吧部落格。免费资源部落社区天天更新大量精选实用的绿色软件,并提供真实客观的软件测评.

/div

/body

/html

二.代码注释:

var box = document.getElementById(box)，获取id属性值为box的div对象。

var text = box.innerHTML，将div中的内容赋值给text变量。

var newBox = document.createElement(div)，创建一个新的div对象。

var btn = document.createElement(a)，创建一个新的a对象。

newBox.innerHTML = text.substring(0,20)，截取长度为20的字符串复制给新创建的div。

btn.innerHTML = text.length20 ? ...显示全部 : ，如果整个文章的内容字符串长度超过20，那么就将...显示全部复制给新创建的链接，否则将空值赋值给新创建的链接对象。

btn.href =### ，将新创建链接的href属性值设置为###。

btn.onclick = function(){},为新创建的a注册事件处理函数。

box.innerHTML =，清空box中的内容。

box.appendChild(newBox)和 box.appendChild(btn)，将创建的元素附加在box中。

以上代码实现了我们预期的功能，当文章超过指定的长度，就会截取一定的字符串，然后在后面添加指定的可以点击的文本，当点击此文本时可以展开内容，展开的内容后面有添加的点击可以收起的文本。