js展开收起(折叠)效果 — 一个展开和收起的js代码实现div层的展开和折叠效果
如何实现js展开收起(折叠)效果呢?例如:一段内容过长了,我限制他显示为20个字内,但是超出了20的就先用省略号代替,然后后面添加一个展开,点击展开后就显示所有的内容,这时候展开按钮就变成了 折叠按钮,点击折叠又变成了展开,并且,折叠后又像是20字内了!下面奇芳阁就分享一下通过JS截取字符串实现展开收起(折叠)的功能!
javascript实现点击查看全文和收起效果代码:
一.实现原理:
获取div中的文本内容,然后动态创建一个div和和a对象,如果文章的内容超过指定的字数,那么就会截取指定的 字符串,然后将截取的内容放入创建的div中,a对象中的内容也设置为“…显示全部”,这样就实现了默认状态的收起效果。当点击显示全部后,会将原来 box中的内容全部放到新创建的div中,并且将a对象中的内容设置为”收起”。基本就是这个原理实现的此效果。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <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.length > 20 ? "...显示全部" : ""; 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> |
二.代码注释:
1 2 3 4 5 6 7 8 9 10 | 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.length > 20 ? "...显示全部" : "",如果整个文章的内容字符串长度超过20,那么就将"...显示全部"复制给新创建的链接,否则将空值赋值给新创建的链接对象。 btn.href = " ### ",将新创建链接的href属性值设置为"###"。 btn.onclick = function(){},为新创建的a注册事件处理函数。 box.innerHTML = " ",清空box中的内容。 box.appendChild(newBox)和 box.appendChild(btn),将创建的元素附加在box中。 |
以上代码实现了我们预期的功能,当文章超过指定的长度,就会截取一定的字符串,然后在后面添加指定的可以点击的文本,当点击此文本时可以展开内容,展开的内容后面有添加的点击可以收起的文本。
来源:邦林织梦(微信/QQ号:909912499),欢迎分享本文,转载请保留出处!部分内容来自网络,如有侵权请联系删除处理!
相关信息
本站提供代码修改,dedecms,WordPress仿站二次开发 / PHP网站建设以及SEO优化等网络营销推广等服务。
如有需要请加QQ: 909912499