原生js实现新闻列表展开/收起全文功能
更新时间：2017年1月23日 10:00 点击：1782
知识要点
1.实现原理很简单，通过点击a标签设置div的display属性隐藏或者显示，
主要是对dom操作的掌握。
2.需要用到的dom操作：
parentNode 获取父级元素
nextSibling获取下一个紧跟的节点
previousSibling获取上一个紧跟的节点
3.注意事项：
要考虑到当点击展开全文的时候，其他已经展开的全文要收起来。
当用nextSibling获取下一个节点时候，不同浏览器的判断是不一样的
有的是获取元素，有的获取换行符或者空格，所以这里就要用到nodeType来判断一下数据类型nodeType只返回数字1、2、3
只有返回1的时候获取的才是元素节点
（我特么做的时候没考虑到这个问题，还以为哪出毛病了搞了好久）
还有就是由于js里没有像jquery里获取同级所有元素的dom操作，所以我自己写了个siblings(elm)
以后也可以用，一劳永逸
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
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;}
</style>
</head>
<body>
<div id="pn">
<div id="list0">
<p class="title">Jackie吉吉</p>
<p class="time">12月3日 20:49 来自 +niPhone 6s</p>
<p class="zy">感谢@马路口的YY 今天的款待！一直觉得你们两口子颜值又高人又有趣，又都是高材生，认识你们真的很是很幸运的一件事！~ 终于修成正果了呀~祝福你们新婚快乐白头偕老~ 感谢...<a class="show" href="#">展开全文</a></p>
<div class="content">感谢@马路口的YY 今天的款待！一直觉得你们两口子颜值又高人又有趣，又都是高材生，认识你们真的很是很幸运的一件事！~ 终于修成正果了呀~祝福你们新婚快乐白头偕老~ 感谢@SNH48-杨韫玉-- 让我们相识[偷乐]以后也一起去看公演呀~ 哪个队都成。
<a href="#" class="hidd">收起全文</a>
</div>
</div>
<div id="list0">
<p class="title">高晓松</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 id="list0">
<p class="title">王尼玛</p>
<p class="time">12月7日 12:30 来自 微博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>
<script type="text/javascript">
//在页面加载完后立即执行多个函数方案。
function addloadEvent(func){
var oldonload=window.onload;
if(typeof window.onload !="function"){
window.onload=func;
}
else{
window.onload=function(){
if(oldonload){
oldonload();
}
func();
}
}
}
addloadEvent(b);
//在页面加载完后立即执行多个函数方案结束。
//获取同级所有元素开始
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;
}
//获取同级所有元素结束
function b(){
//获取查看全文的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";
}
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值，下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-15
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 作为前端，一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手，前端能做的太少。而且由于源码的暴露，攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的，本文的许多方法，用在其他方面也是大有作用。...2021-05-24
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要为大家详细介绍了js实现列表按字母排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-08-11
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料，具有一定的参考价值，感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
- 本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码，有需要的小伙伴可以参考下。...2016-01-20
- 系统的学习了一下angularjs，发现angularjs的有些思想根php的模块smarty很像，例如数据绑定，filter。如果对smarty比较熟悉的话，学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解，感兴趣的朋友一起学习吧...2015-12-29
- 这次文章要给大家介绍的是node.JS md5加密中文与php结果不一致怎么办，不知道具体解决办法的下面跟小编一起来看看。 因项目需要，需要Node.js与PHP做接口调用，发现nod...2017-07-06
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮，感兴趣的小伙伴们可以参考一下...2016-03-03
- 为了网站的安全性，很多朋友都把密码设的比较复杂，但是如何密码不能明显示，不知道输的是对是错，为了安全起见可以把密码显示的，那么基于js代码如何实现的呢？下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示，需要的朋友参考下...2016-03-03
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- v-for标签可以用来遍历数组，将数组的每一个值绑定到相应的视图元素中去，下面这篇文章主要给大家介绍了关于在Vue.js中轻松解决v-for执行出错的三个方案，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。...2017-06-15