JS 实现段落展开和收起
实现
实现如图所示的段落展开和收起功能:
分析
<div class="box"> <p id="content"> 人生最美是清欢;愿有一屋,不被打扰,幸福终老 ;一袭江南梦,醉卧烟雨中;春在水墨中发芽 恬淡,禅里开出的花 ;寻得一方庭院,做匠人 ;有一个院子,种花,画画 ;春未暖,花先开 中国青花蓝,惊艳世界 ;寻一扇窗子,找到一份静心 ;拖地浇花,春暖花开 ;寻一个小镇,守一人终老。<br> 人生如一场修行,得意时,“一日看尽长安花”,艰难时,“潦倒新停浊酒杯”,但生命的跋涉不能回头, 哪怕“畏途巉岩不可攀,也要“会当凌绝顶”,哪怕“无人会登临意”,也要“猛志固常在”, 从经典中汲取“九万里风鹏正举”的力量,历练“也无风雨也无晴”的豁然,“待到重阳日”,我们“还来就菊花”。 </p> </div>
对此段落实现展示前100字,剩下的内容收起。
- 获取该元素的 id 并得到段落全部内容
- 创建标签<span>,并把 id 里面的前100字放进去
- 创建标签<a>,设为展开收起,点击实现效果
- 设置 id 内容为空,把标签<span>和<a>插入进 id
js思想实现
<head> <meta charset="UTF-8"> <title>段落展开和收起</title> <style> .box { margin: 0 auto; width: 400px; height: 300px; border: 1px solid cadetblue; background-color: #efefef; border-radius: 10px; font-size: 15px; text-indent: 2em; } </style> </head> <body> <div class="box"> <p id="content"> 人生最美是清欢;愿有一屋,不被打扰,幸福终老 ;一袭江南梦,醉卧烟雨中;春在水墨中发芽 恬淡,禅里开出的花 ;寻得一方庭院,做匠人 ;有一个院子,种花,画画 ;春未暖,花先开 中国青花蓝,惊艳世界 ;寻一扇窗子,找到一份静心 ;拖地浇花,春暖花开 ;寻一个小镇,守一人终老。<br> 人生如一场修行,得意时,“一日看尽长安花”,艰难时,“潦倒新停浊酒杯”,但生命的跋涉不能回头, 哪怕“畏途巉岩不可攀,也要“会当凌绝顶”,哪怕“无人会登临意”,也要“猛志固常在”, 从经典中汲取“九万里风鹏正举”的力量,历练“也无风雨也无晴”的豁然,“待到重阳日”,我们“还来就菊花”。 </p> </div> <script> window.onload = function show(){ var len = 100; //默认显示字数 var con = document.getElementById('content'); var content = con.innerHTML; //获取段落内容 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链接点击不跳转 //点击时修改span标签还有a标签 a.onclick = function (){ if(a.innerHTML.indexOf("展开")>0){ //如果a中含有"展开"点击后则显示"收起" a.innerHTML = "<< 收起"; span.innerHTML = content; //span标签显示所有字数 }else{ a.innerHTML = "... 展开"; span.innerHTML = content.substring(0,len); } } // 设置p内容为空,span元素 a元素加入到p中 con.innerHTML = ""; con.appendChild(span); con.appendChild(a); } </script> </body>