原生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 相关文章推荐
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
js怎么判断flash swf文件是否加载完毕
Aug 14 Javascript
Javascript中使用parseInt函数需要注意的问题
Apr 02 Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 Javascript
使用javaScript实现鼠标拖拽事件
Apr 03 Javascript
深入理解Node module模块
Mar 26 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
理理Vue细节(推荐)
Apr 16 Javascript
vue路由教程之静态路由
Sep 03 Javascript
解决axios post 后端无法接收数据的问题
Oct 29 Javascript
JS动态图片的实现方法完整示例
Jan 13 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 Javascript
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 - Html Transfer Code
2006/10/09 PHP
PHP 第一节 php简介
2012/04/28 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
php操作redis缓存方法分享
2015/06/03 PHP
php简单判断两个字符串是否相等的方法
2015/07/13 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
JavaScript 注册事件代码
2011/01/27 Javascript
javascript自动生成包含数字与字符的随机字符串
2015/02/09 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
iview table高度动态设置方法
2018/03/14 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
2019/09/24 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
python实现simhash算法实例
2014/04/25 Python
Python与shell的3种交互方式介绍
2015/04/11 Python
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
django admin组件使用方法详解
2019/07/19 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
2019/08/01 HTML / CSS
美国高街时尚品牌:OASAP
2016/07/24 全球购物
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
父母对孩子的寄语
2014/04/09 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
无工作证明怎么写
2015/06/15 职场文书
文艺委员竞选稿
2015/11/19 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL