当前位置: 首页 > 编程笔记 >

原生js实现新闻列表展开/收起全文功能

侯向文
2023-03-14
本文向大家介绍原生js实现新闻列表展开/收起全文功能,包括了原生js实现新闻列表展开/收起全文功能的使用技巧和注意事项,需要的朋友参考一下

知识要点

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> 

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持小牛知识库!

 类似资料:
  • 本文向大家介绍JavaScript实现QQ列表展开收缩扩展功能,包括了JavaScript实现QQ列表展开收缩扩展功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现QQ列表展开收缩扩展展示的具体代码,供大家参考,具体内容如下 效果图: 代码: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍android listview实现新闻列表展示效果,包括了android listview实现新闻列表展示效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了android listview列表展示效果的具体代码,供大家参考,具体内容如下 1.封装一些新闻数据 2.使用listview展示出来 3.设置条目点击事件,点击后跳转浏览器查看新闻 listview_item

  • 本文向大家介绍Vue.js 实现数据展示全部和收起功能,包括了Vue.js 实现数据展示全部和收起功能的使用技巧和注意事项,需要的朋友参考一下 如图所示,当我们获取到数据后每个栏都只显示5条,多出的部分隐藏,点击显示全部将数据都展现出来,如图所示 首先我们的数据类型是这样的,      总结 以上所述是小编给大家介绍的Vue.js 实现数据展示全部和收起功能,希望对大家有所帮助,如果大家有任何疑问

  • 本文向大家介绍原生JS实现留言板功能,包括了原生JS实现留言板功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JS实现留言板功能的具体代码,供大家参考,具体内容如下 实现这个留言板功能比较简单,所以先上效果图: 实现用户留言内容,留言具体时间。 通过获取input的输入焦点事件抓取内容,传递给留言板的div来展示。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多

  • 本文向大家介绍Vue实现搜索 和新闻列表功能简单范例,包括了Vue实现搜索 和新闻列表功能简单范例的使用技巧和注意事项,需要的朋友参考一下 效果图如下所示: 总结 以上所述是小编给大家介绍的Vue实现搜索 和新闻列表功能简单范例,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持!

  • 本文向大家介绍原生JS和jQuery版实现文件上传功能,包括了原生JS和jQuery版实现文件上传功能的使用技巧和注意事项,需要的朋友参考一下 本文实例分享了原生JS版和jQuery 版实现文件上传功能的例子,供大家参考,具体内容如下 php代码: 更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。 以上就是本文的全部内