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

更新时间:2021-05-31    来源:ling    手机版     字体:

【www.bbyears.com--ling】

知识要点

1.实现原理很简单,通过点击a标签设置div的display属性隐藏或者显示,

主要是对dom操作的掌握。

2.需要用到的dom操作:

parentNode 获取父级元素

nextSibling获取下一个紧跟的节点

previousSibling获取上一个紧跟的节点

3.注意事项:

要考虑到当点击展开全文的时候,其他已经展开的全文要收起来。

当用nextSibling获取下一个节点时候,不同浏览器的判断是不一样的

有的是获取元素,有的获取换行符或者空格,所以这里就要用到nodeType来判断一下数据类型nodeType只返回数字1、2、3

只有返回1的时候获取的才是元素节点

(我特么做的时候没考虑到这个问题,还以为哪出毛病了搞了好久)

还有就是由于js里没有像jquery里获取同级所有元素的dom操作,所以我自己写了个siblings(elm)

以后也可以用,一劳永逸

完整代码

 

 代码如下

demo

 

 

  Jackie吉吉

  12月3日 20:49 来自 +niPhone 6s

  感谢@马路口的YY 今天的款待!一直觉得你们两口子颜值又高人又有趣,又都是高材生,认识你们真的很是很幸运的一件事!~ 终于修成正果了呀~祝福你们新婚快乐白头偕老~ 感谢...展开全文

  感谢@马路口的YY 今天的款待!一直觉得你们两口子颜值又高人又有趣,又都是高材生,认识你们真的很是很幸运的一件事!~ 终于修成正果了呀~祝福你们新婚快乐白头偕老~ 感谢@SNH48-杨韫玉-- 让我们相识[偷乐]以后也一起去看公演呀~ 哪个队都成。

  收起全文

  

 

 

 

  高晓松

  44分钟前 来自 微博 weibo.com

  波澜壮阔的独立斗争,风起云涌的解放运动,卡斯特罗泼墨挥毫一人写就半部古巴史。戴名表开豪车上名校,亲美富二代卡斯特罗早早走上革命之路竟是由基因决定?艳福不浅,老卡又如何能在有生之年睡完传闻中的35000个女人?高晓松用数据还原真实的古巴,看今日...展开全文

  波澜壮阔的独立斗争,风起云涌的解放运动,卡斯特罗泼墨挥毫一人写就半部古巴史。戴名表开豪车上名校,亲美富二代卡斯特罗早早走上革命之路竟是由基因决定?艳福不浅,老卡又如何能在有生之年睡完传闻中的35000个女人?高晓松用数据还原真实的古巴,看今日的它究竟是落后贫穷还是盛世繁华:L晓松奇谈之革命领袖卡斯特罗的传奇一生

  收起全文

  

 

 

  王尼玛

  12月7日 12:30 来自 微博weibo.com

  已退役的美国休斯顿德州人橄榄球队的外接手安德烈·约翰逊,为12位由儿童保护服务组织选出的孩子买圣诞节玩具,孩子们可以在80秒内...展开全文

  已退役的美国休斯顿德州人橄榄球队的外接手安德烈·约翰逊,为12位由儿童保护服务组织选出的孩子买圣诞节玩具,孩子们可以在80秒内选择他们喜欢的任何玩具,最终这些玩具花费19144.58美元,慷慨!好了好了别闹了,论飙车还是应该老司机出马!

  收起全文

  

 

 

 <scripttype="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

  if(p[i] !== elm) a.push(p[i]);

 }

 return a;

 }

 //获取同级所有元素结束

 function b(){

 //获取查看全文的a标签

 varshow=document.getElementsByClassName("show");

 //遍历a

 for(vari=0;i

  show[i].onclick=function(){

  //找到a的父级

  varfather=this.parentNode;

  //设置隐藏

  father.style.display="none";

  //找到父级的下一个节点

  varnext=father.nextSibling;

  //判断下一个节点的数据类型,如果不是1(元素节点),那就接着往下找

  if(next.nodeType!=1){

  next=next.nextSibling;

  }

  //正文显示

  next.style.display="block";

  //获取整个list0

  varff=this.parentNode.parentNode;

  //获取除去list0的所有同级元素

  varbro=siblings(ff);

  for(vary=0;y

  //获取每个list0里的第一个content类名

  varw=bro[y].getElementsByClassName("content")[0];

  //获取content类名的前一个节点

  varwt=w.previousSibling;

  //判断前一个节点的数据类型,如果不是1(元素节点),那就接着往上找

  if(wt.nodeType!=1){

  wt=wt.previousSibling;

  }

  //同级摘要部分显示

  wt.style.display="block";

  //同级全文部分隐藏

  w.style.display="none";

  }  

  }

 }

 //下面就是点击收回全文的部分与展开原理一样

 varhidd=document.getElementsByClassName("hidd");

 for(vari=0;i

  hidd[i].onclick=function(){

  varfafa=this.parentNode;

  fafa.style.display="none";

  varpre=fafa.previousSibling;

  if(pre.nodeType!=1){

  pre=pre.previousSibling;

  }

  pre.style.display="block";

  }

 }

 }

 </script>

 

本文来源:http://www.bbyears.com/shujuku/120812.html

热门标签

更多>>

本类排行