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 时代,有一个 ...
随机推荐
- 用户登陆显示cpu、负载、内存信息
#用户登陆显示cpu.负载.内存信息 #!/bin/bash # hostip=`ifconfig eth0 |awk -F" +|:" '/Bcast/{print $4}'` ...
- QTableview 获取鼠标坐标的item（QModelIndex）
要实现的功能是QTableview中Item项上右键弹出菜单这就必然要判断点击右键时鼠标指针是否在QTableView的Item上 如果是QTableWidget可以用itemAt来判断QTableV ...
- 【眼见为实】自己动手实践理解数据库READ COMMITTED && MVCC
[READ COMMITTED] 首先设置数据库隔离级别为读已提交(READ COMMITTED): set global transaction isolation level READ COMMI ...
- 星空灯改装成USB供电
简单的手工活,20分钟搞定 1.用一根USB线剪断,将红黑两根线分别连接到星空灯电源供电的正负极 2.由于USB输出5V 0.5A的电流,因此需要改装下,办法一,加电阻,办法二,换灯泡,由于小电阻并不 ...
- Python3利用Dlib19.7实现摄像头人脸识别的方法
0.引言 利用python开发,借助Dlib库捕获摄像头中的人脸,提取人脸特征,通过计算欧氏距离来和预存的人脸特征进行对比,达到人脸识别的目的: 可以自动从摄像头中抠取人脸图片存储到本地,然后提取构建 ...
- Linux工具-nmon
1.nmon下载地址:https://sourceforge.net/projects/nmon/files/ 创建文件nmon:# mkdir nmon 解压文件夹:# tar -zxvf nmon ...
- mongodb节点配置指南
修改复制集节点的优先级 复制集节点的 priority 参数的值决定了选举中该节点的优先级.值越高,优先级越高. 我们可以通过修改复制集配置参数中 members 数组位置的优先级来修改对应机器的优先 ...
- 用setTimeout实现动态时钟的效果
1.获取到系统时间 2.获取到当地时间字符串 3.开启延时器,每一秒刷新一次时间 <!DOCTYPE html> <html> <head> <meta ch ...
- netstat 常用方法
netstat简介 netstat是一个监控TCP/IP网络的非常有用的工具,它可以显示路由表,实际的网络连接以及每一个网络接口设备的状态信息,netstat用于显示与IP,TCP,UDP和ICMP协 ...
- 在oracle电子商务套件中输出信息
一.用自定义用户HAND_SL登陆http://zd01.haasgz.hand-china.com:30000/ 添加可执行并发程序 执行文件名填写自己的包名称.入口函数/过程名 二.将可执行程序添 ...