js 实现内容的展开和收缩
<!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 实现内容的展开和收缩的更多相关文章
- dhtmlxtree 节点 展开收缩：新增了直接点 文本内容 也 实现了 展开收缩 功能（并记住了展开、收缩状态）
dhtmlxtree 节点 展开收缩通常情况我们按 +- 就实现了 展开收缩 功能,为了方便我们新增了直接点 文本内容 也 实现了 展开收缩 功能(并记住了展开.收缩状态) tree = new dh ...
- 实用js+css多级树形展开效果导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【iOS系列】-UITableViewCell的展开与收缩的实现思路
UITableViewCell的展开与收缩的实现思路 现在项目中很多地方都会用到,所以我这里介绍一种可以复用的思路,这与文章后面的Swift的实现思路不同,具体大家可自行对比. Demo项目地址 开始 ...
- DataGridView之行的展开与收缩
很多数据都有父节点与子节点,我们希望单击父节点的时候可以展开父节点下的子节点数据. 比如一个医院科室表,有父科室与子科室,点击父科室后,在父科室下面可以展现该科室下的所有子科室. 我们来说一下在Dat ...
- ios知识点总结——UITableView的展开与收缩及横向Table
UITableVIew是iOS开发中使用最为广泛的一种控件,对于UITableView的基本用法本文不做探讨,本文主要是针对UITableView的展开与收缩进行阐述,在文章的后面也会探讨一下横向ta ...
- 1、js基础内容
js基础内容 1. 编辑器 编译环境 浏览器 编辑软件 sublime DW H5Build Atom ==[注]尽可能多的去使用编辑器去编辑代码.== Html+css ==JS 逻辑== 比作建设 ...
- JS复制内容到剪贴板(兼容FF/Chrome/Safari所有浏览器)
现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...
- JS把内容动态插入到DIV
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT ...
- JS复制内容到剪贴板: 兼容IE、Firefox、Chrome、Safari所有浏览器【转】
正 文: 现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个 ...
随机推荐
- 记录一次json转换的经历
需求:数据库里面的一个字段,存的是json数据,类似{‘name’:“name1”,'items':“[{code:0,name:'name2'}]”},{‘name’:“name3”,'items' ...
- 效果CSS实现三角
<view class="hd"></view>.hd { content: ""; height: 16rpx; wi ...
- 微软在WPC 2015中为“伙伴们”带来了什么？
在微软 WPC 2015(微软全球合作伙伴大会)上,微软全球渠道总监 Phil Sorgen 指出,微软总营收的 92% 来自合作伙伴.这句话验证了微软与合作伙伴间日益紧密的合作关系,也点出了本次大会 ...
- c#之反射(Reflection)
一.反射是什么 反射就是.Net FrameWork框架为我们提供的一个帮助类库,它可以读取我们通过编译后生成的dll和exe文件里面metadate的信息. 反射可以动态的加载dll和exe文件,动 ...
- django的orm操作的补充
---恢复内容开始--- 你在建立一个登陆的时候需要用到auth这个用户登陆模块 这个时候就需要用到user表中的信息你就可以继承 这个时候我们的用户表中继承我们user继承的表 ABstractUs ...
- 连续支付的年金 （continuously payable annuity）
一.含义 假设连续不断地付款,但每年的付款总量仍然为1元. 二. 连续支付年金是年支付次数m趋于无穷大时的年金,故 连续支付年金与基本年金的关系: 连续支付,每年的支付总量为1,支付期限为无穷: 积累 ...
- LINUX下OA搭建
- Java.util 包（Date 类、Calendar类、Random类）
java.util 包提供了一些实用的方法和数据结构. Date 类 Date 类表示日期和时间,里面封装了操作日期和时间的方法.Date 类经常用来获取系统当前时间. 构造方法: 构造方法 说明 D ...
- 项目管理利器-Maven（Windows安装）
什么是Maven? 安装Maven环境: 下载地址:https://maven.apache.org/download.cgi Maven3.3+JDK1.7以上版本 下载windows版本 解压到本 ...
- 利用TLE数据确定卫星轨道（2）－SGP4模型实现
1.TLE轨道报: 接上一篇,TLE轨道报各项内容所代表的意义如下: 2.SGP4模型: TLE轨道报计算卫星轨道需要用到 NORAD 开 发 的 SGP4/SDP4 模 型 ,SGP4模型是由 Ke ...