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实现一段文字展开、收起（默认收起）相关推荐

javascript实现评论内容展开、收起（默认收起）
html: <div class="teste">因国际贸易担忧情绪和美国制造业PMI进一步衰退影响,周二黄金出现了近20美元的上涨,并收回了1550美元关口.同时有消 ...
[javascript] 实现展开全文和收起全文效果
在展示大量文本的时候,很多网站会在页面上出现一个展开全文的文字按钮 , 点击这个按钮才会展开全部内容 . 使用jquery比较容易实现 , 最开始我想直接根据vuejs的语法来实现效果 , 结果失败 ...
css 文本、文字展开与收缩，查看更多收起
<view class='containers'><text class="content {{ellipsis?'ellipsis':'unellipsis'}}&quo ...
vue控制多行文字展开收起
这里讲一下,如何使用vue控制多行文字展开收起(也叫控制文字展开隐藏). 效果: 这里设置了控制三行,如果超过三行会展示,"显示更多" 超出文字显示省略号. 点击"显示更 ...
vue中多行文本标签_vue控制多行文字展开收起的实现示例
这里讲一下,如何使用vue控制多行文字展开收起(也叫控制文字展开隐藏). 效果: 这里设置了控制三行,如果超过三行会展示,"显示更多" 超出文字显示省略号.点击"显示更多 ...
仿微信朋友圈，文字展开全文，全文收起功能
简单操作4步即可实现文字展开收起功能: 1.布局写2个Textview 一个是内容一个是按钮(收起和全文) <TextView android:layout_marginTop="@ ...
两端分散对齐怎么设置_如何用css实现一段文字的两端对齐和分散对齐
展开全部用css实现一段32313133353236313431303231363533e78988e69d8331333433646435文字的两端对齐的代码输入步骤如下: 1.首先输入代码让这段 ...
iostext添加点击事件_iOS实现一段文字中指定的某些文字点击有响应事件或者可以跳转(给字符串添加超链接)...
直接上需求,见如下UI图: 需求是点击中间的电话(蓝色字体部分),可以直接拨打电话.对于这种很长的一段文字中间夹着可以有点击事件的文字,可以通过下面这种方式解决: 图中所指的这段文字,不用UILabe ...
c语言怎么循环输入单个字符,c语言帮我检查一下输入一段文字，每行用回车结束，文字输入完毕可以使用某个特殊字符作为结束，...
c语言帮我检查一下输入一段文字,每行用回车结束,文字输入完毕可以使用某个特殊字符作为结束,0 HIDE152019.04.28浏览4次分享举报 c语言输入一段文字,每行用回车结束,文字输入完毕可以 ...

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

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

最新文章

热门文章