原生js实现新闻列表展开/收起全文功能
程序员文章站
2023-11-03 12:44:46
知识要点
1.实现原理很简单,通过点击a标签设置div的display属性隐藏或者显示,
主要是对dom操作的掌握。
2.需要用到的dom操作:
parentnod...
知识要点
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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
下一篇: JS中from 表单序列化提交的代码