原生js實現(xiàn)新聞列表展開/收起全文功能

更新時間：2017年01月20日 11:31:00 作者：夏天不做夢

本文主要介紹了原生js實現(xiàn)新聞列表展開/收起全文功能的知識要點、注意事項以及完整代碼。具有一定的參考價值，下面跟著小編一起來看下吧

知識要點

1.實現(xiàn)原理很簡單，通過點擊a標簽設(shè)置div的display屬性隱藏或者顯示，

主要是對dom操作的掌握。

2.需要用到的dom操作：

parentNode 獲取父級元素

nextSibling獲取下一個緊跟的節(jié)點

previousSibling獲取上一個緊跟的節(jié)點

3.注意事項：

要考慮到當點擊展開全文的時候，其他已經(jīng)展開的全文要收起來。

當用nextSibling獲取下一個節(jié)點時候，不同瀏覽器的判斷是不一樣的

有的是獲取元素，有的獲取換行符或者空格，所以這里就要用到nodeType來判斷一下數(shù)據(jù)類型nodeType只返回數(shù)字1、2、3

只有返回1的時候獲取的才是元素節(jié)點

（我特么做的時候沒考慮到這個問題，還以為哪出毛病了搞了好久）

還有就是由于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個女人？高曉松用數(shù)據(jù)還原真實的古巴，看今日...<a class="show" href="#">展開全文</a></p>
 <div class="content">波瀾壯闊的獨立斗爭，風起云涌的解放運動，卡斯特羅潑墨揮毫一人寫就半部古巴史。戴名表開豪車上名校，親美富二代卡斯特羅早早走上革命之路竟是由基因決定？艷福不淺，老卡又如何能在有生之年睡完傳聞中的35000個女人？高曉松用數(shù)據(jù)還原真實的古巴，看今日的它究竟是落后貧窮還是盛世繁華：L曉松奇談之革命領(lǐng)袖卡斯特羅的傳奇一生
 <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位由兒童保護服務(wù)組織選出的孩子買圣誕節(jié)玩具，孩子們可以在80秒內(nèi)...<a class="show" href="#">展開全文</a></p>
 <div class="content">已退役的美國休斯頓德州人橄欖球隊的外接手安德烈·約翰遜，為12位由兒童保護服務(wù)組織選出的孩子買圣誕節(jié)玩具，孩子們可以在80秒內(nèi)選擇他們喜歡的任何玩具，最終這些玩具花費19144.58美元，慷慨！好了好了別鬧了，論飆車還是應(yīng)該老司機出馬！
 <a href="#" class="hidd">收起全文</a>
 </div>
 </div>
 </div>
 <script type="text/javascript"> 
 //在頁面加載完后立即執(zhí)行多個函數(shù)方案。
 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);
 //在頁面加載完后立即執(zhí)行多個函數(shù)方案結(jié)束。
 //獲取同級所有元素開始
 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;
 }
 //獲取同級所有元素結(jié)束
 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;
 //設(shè)置隱藏
 father.style.display="none";
 //找到父級的下一個節(jié)點
 var next=father.nextSibling;
 //判斷下一個節(jié)點的數(shù)據(jù)類型，如果不是1（元素節(jié)點），那就接著往下找
 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類名的前一個節(jié)點
 var wt=w.previousSibling;
 //判斷前一個節(jié)點的數(shù)據(jù)類型，如果不是1（元素節(jié)點），那就接著往上找
 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>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: