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 时代,有一个 ...
随机推荐
- 在AndroidStudio中数据存储第三方数据管理Bmob的使用
---恢复内容开始--- 在日常写代码的过程中我们比较痛苦的就是数据库的建立和使用,那么今天来介绍一下一个第三方的数据管理平台Bmonb. 一.我们首先进入Bmob的官网创建一个账号 Bome官网网址 ...
- eclipse4.5(mars)环境
官网下载页面: http://www.eclipse.org/downloads/download.php?file=/technology/epp/downloads/release/mars/2/ ...
- Apache的主要目录和配置文件详解
一.Apache 主要配置文件注释Apache的主配置文件:/etc/httpd/conf/httpd.conf默认站点主目录:/var/www/html/Apache服务器的配置信息全部存储在主配置 ...
- SQL中的Datetime
在SQLserver中Datetime,只要格式是(yyyy-MM-dd HH:mm:ss)它都能认为是时间类型.
- 【转】ISMS方针、手册、程序文件模板
<ISMS方针.手册.程序文件模板> 1 信息安全管理手册 2 信息安全适用性声明 3 信息安全管理体系程序文件 3.01文件管理程序 3.02记录管理程序 3.03纠正措施管理程序 3. ...
- cygwin64-安装包管理工具
1.dos command, install pkg $ setup-x86_64.exe -q -P curl $ setup-x86_64.exe -q -P lynx 2. cygwin64 c ...
- strncpy()函数【转】
C/C++中的strncpy()函数功能为将第source串的前n个字符拷贝到destination串,原型为: char * strncpy ( char * destination, const ...
- Kendo 计算字段
var Product = kendo.data.Model.define({ fields: { "quantity": { type: "number" } ...
- git操作：
error: Your local changes to the following files would be overwritten by merge: **/**/**.php Please, ...
- 移动App中常见的Web漏洞
智能手机的存在让网民的生活从PC端开始往移动端转向,现在网民的日常生活需求基本上一部手机就能解决.外卖,办公,社交,银行转账等等都能通过移动端App实现.那么随之也带来了很多信息安全问题,大量的用户信 ...