<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js实现内容模块展开和收缩</title>
<style>
p{
width: 400px;
margin: 40px auto;
border: 5px solid yellow;
padding: 20px;
}
</style>
<script>
window.onload = function () {
var span = document.getElementsByTagName("span")[0];
console.log(span);
var btn = document.getElementsByTagName("a")[0];
//拿到所有文字
var str = span.innerHTML;
//设置一个开关，记录展开和收缩
var isOn = true;
//btn添加事件，在事件里修改span文字
btn.onclick = function () {
//点击按钮的时候改变开关的值
isOn = !isOn;
if(isOn == true){
span.innerHTML = str;
btn.innerHTML = "收缩";
}else{
//收缩
span.innerHTML = str.substring(0, 30)+"...";
btn.innerHTML = "展开";
}
}
}
</script>
</head>
<body>

<p>
<span>
刚好遇见你，余生都是你

------愿每一个等待的人最后都能精诚开，愿每一个去爱的人都能被温柔待。

今生今世，你负责美丽，我负责爱你。其他无能为力的交给风，交给雨，交给蓝天白云，交给大地海洋。

今生今世，愿世界对你温柔深情以待。免你惊，免你苦，免你四下流离，免你无枝可依。

不知何时起，你成了我心中守口如瓶的一个秘密，我不会再向别人分享你的消息，也不愿与别人分享你生命里的点点滴滴。

爱本就是自私的，不自私的爱还算爱吗？我很自私的想让你留在身边，于现在牵手于未来白头。

我再爱你，亦不能替你做任何决定，也无力想去改变你的脾气。

仔细想来不如索性对如风的你三缄其口，对生活赐予的一切照单全收。

我相信每一个等待的人最后都能精诚开，每一个去爱的人都能被温柔待；

每一个努力的人都会有所收，每一对相爱的人都能到最后。

等我们年迈蹉跎，步履缓慢，家庭和睦美满，儿女承欢膝下。

等我们颐养天年，不再为功名奔波，不再为生计忙碌。

若我还能鼓起勇气，若你还愿洗耳恭听，依然会说我爱你。

用我那牙口不全的嘴唇，吻你依然美丽的脸颊。

我会洗去一身风尘疲惫，满脸回忆的向你说起我们的前尘往事。

说一个从年少到迟暮，从青年到老去属于我们相知相爱的故事。

你是莞尔失笑，还是潸然泪下，亦或是挽起我的手臂，如现在一样的幸福甜蜜。
</span>
<a href="javascript:;">收缩</a>
</p>

</body>
</html>

js 实现内容的展开和收缩的更多相关文章

  1. dhtmlxtree 节点 展开收缩：新增了直接点 文本内容 也 实现了 展开收缩 功能（并记住了展开、收缩状态）

    dhtmlxtree 节点 展开收缩通常情况我们按 +- 就实现了 展开收缩 功能,为了方便我们新增了直接点 文本内容 也 实现了 展开收缩 功能(并记住了展开.收缩状态) tree = new dh ...

  2. 实用js+css多级树形展开效果导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 【iOS系列】-UITableViewCell的展开与收缩的实现思路

    UITableViewCell的展开与收缩的实现思路 现在项目中很多地方都会用到,所以我这里介绍一种可以复用的思路,这与文章后面的Swift的实现思路不同,具体大家可自行对比. Demo项目地址 开始 ...

  4. DataGridView之行的展开与收缩

    很多数据都有父节点与子节点,我们希望单击父节点的时候可以展开父节点下的子节点数据. 比如一个医院科室表,有父科室与子科室,点击父科室后,在父科室下面可以展现该科室下的所有子科室. 我们来说一下在Dat ...

  5. ios知识点总结——UITableView的展开与收缩及横向Table

    UITableVIew是iOS开发中使用最为广泛的一种控件,对于UITableView的基本用法本文不做探讨,本文主要是针对UITableView的展开与收缩进行阐述,在文章的后面也会探讨一下横向ta ...

  6. 1、js基础内容

    js基础内容 1. 编辑器 编译环境 浏览器 编辑软件 sublime DW H5Build Atom ==[注]尽可能多的去使用编辑器去编辑代码.== Html+css ==JS 逻辑== 比作建设 ...

  7. JS复制内容到剪贴板(兼容FF/Chrome/Safari所有浏览器)

    现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...

  8. JS把内容动态插入到DIV

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT ...

  9. JS复制内容到剪贴板: 兼容IE、Firefox、Chrome、Safari所有浏览器【转】

    正 文: 现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个 ...

随机推荐

  1. 一、angularjs基础了解

    说明:此处比较杂,目前没有统一的总结哦 angularjs 是mvvm框架 加载JS文件总是使用后缀为.min.js的文件,因为这些文件是经过压缩的,能提升应用的启动速度 模块说明: 1.config ...

  2. C语言中关键词static的用法与作用域

    一.面向过程设计中的static 转载:http://blog.csdn.net/celerylxq/article/details/6160499 1.静态全局变量 在全局变量前,加上关键字stat ...

  3. HBuilder：一个不错的web前端IDE(代码编辑器)

    Web前端开发,2000之后基本就是三剑客的天下.到现在DW也是不错的HTMLcoder,如今的前端开发早已是JS的天下.但是DW对于JS方面就弱爆了.DW虽然支持JS语法高亮也支持JQuery Jq ...

  4. webpack笔记三 管理输出

    webpack笔记三 管理输出 增加src/print.js: export default function printMe() { console.log('I get called from p ...

  5. 关于CSS中的元素定位

    ---恢复内容开始--- CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定 ...

  6. 激活老电脑的第二春：内存盘为Chrome浏览器做缓存

    AMD Radeon RAMDisk 4.2.1 正式版 下载地址:http://dl.pconline.com.cn/html_2/1/73/id=7204&pn=0.html 适用于:wi ...

  7. SQL server reporting service - rsReportServerNotActivated error solution

    描述: 今天在原有的数据库版本上增加了Reporting Service 功能,数据库完成安装后,没有发现ReportServer和 ReportServerTemp 两个数据库 于是从其他服务器上, ...

  8. Java实现MD5加密及解密的代码实例分享

    链接:http://www.jb51.net/article/86027.htm Java实现MD5加密及解密的代码实例分享 作者:厦门大学陈黎栋 字体:[增加 减小] 类型:转载 时间:2016-0 ...

  9. 最大传输单元MTU

    http://baike.baidu.com/link?url=mU41JFjZzOb3R5crQFCNdocT5ovAswcoIqL2A4U6O5Re_U0-HIYndHG0vSKwc6HbptvH ...

  10. Guava包学习-Cache

    这段时间用到了ehcache和memcache,memcache只用来配置在tomcat中做负载均衡过程中的session共享,然后ehcache用来存放需要的程序中缓存. Guava中的Cache和 ...