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


Posted in Javascript onJanuary 20, 2017

知识要点

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 相关文章推荐
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
Jan 23 Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
jQuery插件MixItUp实现动画过滤和排序
Apr 12 Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
对javascript继承的理解
Oct 11 Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 Javascript
swiper Scrollbar滚动条组件详解
Sep 08 Javascript
Vue实现省市区三级联动
Dec 27 Vue.js
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 #Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
Jan 20 #Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 #Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 #Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 #Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 #Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 #Javascript
You might like
PHP安全防范技巧分享
2011/11/03 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
2018/01/08 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
python 模拟银行转账功能过程详解
2019/08/06 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
python return逻辑判断表达式实现解析
2019/12/02 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
python爬虫工具例举说明
2020/11/30 Python
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
Java面试题:请问一下代码输出是什么
2015/05/27 面试题
如何用JQuery进行表单验证
2013/05/29 面试题
怎样客观的做好自我评价
2013/12/28 职场文书
手机促销活动方案
2014/02/05 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
教室布置标语
2014/06/26 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
欢迎新生标语
2014/10/06 职场文书
大学生暑期社会实践证明范本
2014/10/24 职场文书
销售开票员岗位职责
2015/04/15 职场文书
员工表扬信怎么写
2015/05/05 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
2016企业先进集体事迹材料
2016/02/25 职场文书