Yang's Blog

原生JS实现内容展开收起功能

发表于

1.实现原理很简单，通过点击 a 标签设置 div 的 display 属性隐藏或者显示，主要是对 dom 操作的掌握。
2.需要用到的 dom 操作：
   parentNode 获取父级元素
   nextSibling 获取下一个紧跟的节点
   previousSibling 获取上一个紧跟的节点
3.注意事项：
要考虑到当点击展开全文的时候，其他已经展开的全文要收起来。
当用 nextSibling 获取下一个节点时候，不同浏览器的判断是不一样的
有的是获取元素，有的获取换行符或者空格，所以这里就要用到nodeType来判断一下数据类型 nodeType 只返回数字1、2、3
只有返回1的时候获取的才是元素节点 （我特么做的时候没考虑到这个问题，还以为哪出毛病了搞了好久）
还有就是由于 js 里没有像 jquery 里获取同级所有元素的dom操作，所以我自己写了个 siblings(elm) 以后也可以用，一劳永逸

HTML代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div id="pn">
	<div class="list0">
		<p class="title">Yang</p>
		<p class="time">44分钟前 来自 +niPhone 6s</p>
		<p class="zy">
			单页/全屏滚动页面越来越常见了，它多用于产品介绍、招聘等内容较少的简单页面。针对这种效果也出现了不少 jQuery 插件。本文实现的效果类似于fullpage的单屏滚动，使用原生JS实现，不依赖任何js库...
			<a class="show" href="#">展开全文</a>
		</p>
		<div class="content">单页/全屏滚动页面越来越常见了，它多用于产品介绍、招聘等内容较少的简单页面。针对这种效果也出现了不少 jQuery 插件。本文实现的效果类似于fullpage的单屏滚动，使用原生JS实现，不依赖任何js库今天的款待！一直觉得你们两口子颜值又高人又有趣，又都是高材生，认识你们真的很是很幸运的一件事！~ 终于修成正果了呀~祝福你们新婚快乐白头偕老~ 
			<a href="#" class="hidd">收起全文</a>
		</div>
	</div>
	<div class="list0">
		<p class="title">Yang</p>
		<p class="time">44分钟前 来自 微博 weibo.com</p>
		<p class="zy">
			波澜壮阔的独立斗争，风起云涌的解放运动，卡斯特罗泼墨挥毫一人写就半部古巴史。戴名表开豪车上名校，亲美富二代卡斯特罗早早走上革命之路竟是由基因决定？艳福不浅，老卡又如何能在有生之年睡完传闻中的35000个女人？高晓松用数据还原真实的古巴，看今日...
			<a class="show" href="#">展开全文</a>
		</p>
		<div class="content">
			波澜壮阔的独立斗争，风起云涌的解放运动，卡斯特罗泼墨挥毫一人写就半部古巴史。戴名表开豪车上名校，亲美富二代卡斯特罗早早走上革命之路竟是由基因决定？艳福不浅，老卡又如何能在有生之年睡完传闻中的35000个女人？高晓松用数据还原真实的古巴，看今日的它究竟是落后贫穷还是盛世繁华：L晓松奇谈之革命领袖卡斯特罗的传奇一生
			<a href="#" class="hidd">收起全文</a>
		</div>
	</div>
	<div class="list0">
		<p class="title">王尼玛</p>
		<p class="time">44分钟前 来自 微博weibo.com</p>
		<p class="zy">已退役的美国休斯顿德州人橄榄球队的外接手安德烈·约翰逊，为12位由儿童保护服务组织选出的孩子买圣诞节玩具，孩子们可以在80秒内...<a class="show" href="#">展开全文</a></p>
		<div class="content">
			已退役的美国休斯顿德州人橄榄球队的外接手安德烈·约翰逊，为12位由儿童保护服务组织选出的孩子买圣诞节玩具，孩子们可以在80秒内选择他们喜欢的任何玩具，最终这些玩具花费19144.58美元，慷慨！好了好了别闹了，论飙车还是应该老司机出马！
			<a href="#" class="hidd">收起全文</a>
		</div>
	</div>
</div>

CSS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.clear{clear: both;float: none;height: 0;overflow: hidden;}
body{color:#333; font: 12px/1.3 'Arial','Microsoft YaHei';}
#pn{width: 650px; height: auto; background: #fff; margin: 0 auto; padding: 5px;}
.list0{margin-bottom: 10px;}
.title{ font-weight: bold; font-size: 14px; margin-bottom: 7px;}
.time{color: #808080; margin-bottom: 2px;}
.content{display: none; padding: 1px 0 3px; line-height: 23px; font-size: 14px; }
  
.btm{text-align: right; height: 30px; }
.hidd{ color: #eb7350; margin-left: 5px; }
.show{ color: #eb7350; margin-left: 5px; }
.zy{padding: 1px 0 3px; line-height: 23px; font-size: 14px;}

JavaScript代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
+(function (root, func) {
	//在页面加载完后立即执行多个函数方案。
	var oldonload = window.onload;
	if (typeof window.onload != "function") {
		window.onload = func;
	} else {
		window.onload = function () {
			if(oldonload){
				oldonload();
			}
			func();
		}
	}
}(this, function () {
	//获取同级所有元素开始
	function siblings(elm) {
		var a = [];
		var p = elm.parentNode.children;
		for(var i = 0, pl = p.length; i < pl; i++){
			if(p[i] !== elm) a.push(p[i]);
		}
		return a;
	}
	// 获取查看全文的a标签
	var show = document.getElementsByClassName("show");
	// 遍历a
	for(var i = 0; i < show.length; i++){
		show[i].onclick = function(){
			//找到a的父级
			var father = this.parentNode;
			//设置隐藏
			father.style.display = "none";
			//找到父级的下一个节点
			var next = father.nextSibling;
			//判断下一个节点的数据类型，如果不是1（元素节点），那就接着往下找
			if(next.nodeType != 1){
				next = next.nextSibling;
			}
			//正文显示
			next.style.display = "block";
			//获取整个list0
			var ff = this.parentNode.parentNode;
			//获取除去list0的所有同级元素
			var bro = siblings(ff);
			for(var y = 0; y < bro.length; y++){
				//获取每个list0里的第一个content类名
				var w = bro[y].getElementsByClassName("content")[0];
				//获取content类名的前一个节点
				var wt = w.previousSibling;
				//判断前一个节点的数据类型，如果不是1（元素节点），那就接着往上找
				if(wt.nodeType != 1){
					wt = wt.previousSibling;
				}
				//同级摘要部分显示
				wt.style.display = "block";
				//同级全文部分隐藏
				w.style.display = "none";
			}
		}
	}
	//下面就是点击收回全文的部分与展开原理一样
	var hidd = document.getElementsByClassName("hidd");
	for(var i = 0; i < hidd.length; i++){
		hidd[i].onclick = function(){
			var fafa = this.parentNode;
			fafa.style.display = "none";
			var pre = fafa.previousSibling;
			if(pre.nodeType != 1){
				pre = pre.previousSibling;
			}
			pre.style.display = "block";
		}
	}
}))

展示效果

Enjoy it ? Donate me ! 欣赏此文？求鼓励，求支持！