最新消息:本站所有跳转向bbs.ykit.cn的附件将全面停止,附件已转移到https://www.qingsj.com

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

html 有客 2724浏览 0评论

如何实现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.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>

二.代码注释:

  • 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中。

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

转载请注明:有客帮 » js展开收起(折叠)效果 — 一个展开和收起的js代码实现div层的展开和折叠效果

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址