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 时代,有一个 ...
随机推荐
- postman trigger xdebug session in phpstorm
phpstorm是一款非常棒的php开发调试工具,一般情况下我们使用firefox/chrome的bookmark,开启phpstorm debug侦听,随后点击start debugger, 我们就 ...
- 远程桌面到 Ubuntu 虚拟机
安装 Ubuntu 虚拟机,创建端口号为 3389 的 Endpoint. 安装 Gnome 桌面 复制 sudo apt-get update sudo apt-get install ubuntu ...
- HTML简单框架网页制作 吴昊
- [BZOJ 3514]Codechef MARCH14 GERALD07加强版 (CHEF AND GRAPH QUERIES)
[BZOJ3514] Codechef MARCH14 GERALD07加强版 (CHEF AND GRAPH QUERIES) 题意 \(N\) 个点 \(M\) 条边的无向图,\(K\) 次询问保 ...
- [日常] NOIWC2019 冬眠记
NOIWC 2019 冬眠记 辣鸡rvalue天天写意识流流水账 Day 0 早上没有跑操(极度舒服.png) 和春哥在博客颓图的时候突然被来送笔电的老爹查水表(捂脸) 母上大人骗我说这功能机不能放存 ...
- Programming Assignment 3: Baseball Elimination
编程作业三 作业链接:Baseball Elimination & Checklist 我的代码:BaseballElimination.java 问题简介 这是一个最大流模型的实际应用问题: ...
- iframe加载方案及性能
普通方法加载iframe 在onload之后加载iframe setTimeout来加载iframe 友好型iframe加载 转载地址:翻译文章-iframe异步加载技术及性能 英文原文:Iframe ...
- mac本机svn命令使用
公司项目用到svn,之前做版本管理用的是git. 现在对svn回顾学习了一下. 这里有一篇很好的入门教程 http://www.rubyrobot.org/tutorial/subversion-wi ...
- java二维数组定义初始化-杨辉三角
public class Array2Demo2_3 { public static void main(String[] args) { //定义初始化 int[][] arr = new int[ ...
- 移动端不同分辨率适配--使用flexible
根据阿里手淘团队发布的可伸缩布局方案amfe-flexible,git地址:https://github.com/amfe/lib-flexible. 使用方法: lib-flexible库的使用方法 ...