首頁猿問為什么出錯(cuò)呢？？全文展開但是收起的...

為什么出錯(cuò)呢？？全文展開但是收起的時(shí)候摘要都收起來了？？

JavaScript

qq_蘇達(dá)晟_0 2016-09-13 13:49:04

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />? <title>點(diǎn)擊按鈕控制展開全文與收起全文</title> <style type="text/css"> #art0{ width: 950px; height: auto; border: 1px solid #e7cfcf; padding:10px; margin:0 auto; } .artT{ font-weight: bold; } .butT{ color:#d5d5d5; } .buttom{ text-align: right; line-height: 30px; } .btn{ border: 1px solid #636363; padding:5px; text-decoration: none; background-color: #f0f0f0; } </style> <script src="js/jquery.js"></script> <script> /*function showdiv(obj) { var x = obj.parentNode;//摘要; var y = x.nextSibling;//正文; x.style.display = "none"; y.style.display = "block" }; function hidediv(obj) { var y = obj.parentNode.parentNode; var x = y.previousSibling; x.style.display = "block"; y.style.display = "none"; }*/ function showdiv(obj){? ? ? ? var x=obj.parentNode;//摘要? ? ? ? var y=nextnode(x.nextSibling);//正文? ? ? ? x.style.display="none";? ? ? ? y.style.display="block"? ? }? ? function hidediv(obj){? ? ? ? var y = obj.parentNode.parentNode;//這才是正文? ? ? ? var x = nextnode(y.previousSibling);//摘要? ? ? ? x.style.display="block";? ? ? ? y.style.display="none";? ? }? ? function nextnode(node){? ? ? ? ? ? if(node.nodeType == 1){ //判斷是否是元素節(jié)點(diǎn),排除空的文本節(jié)點(diǎn)? ? ? ? ? ? ? ? ? ? ? ? ?return node;? ? ? ? ? ? }? ? ? ? ? if(node.nextSibling){? ? ? ? ? ? ? ? ? ? ?return nextnode(node.nextSibling);? ? ? ? ? } } </script></head><body id="meta_pname"> <div id="pn"> <div id="art0"> <p class="artT">青春對(duì)白，郵寄我的時(shí)光</p> <p class="butT">日期：2016-08-21 09:31:53 點(diǎn)擊：7068</p> <p>1、手心捧著的文字，清清淺淺，刻著你的眉，你的眼，素筆深深，想你的日子，光陰開成了一朵思念的花，那妖，那艷。 2、終難忘，年少時(shí)光，偶爾臉紅心跳的告白，沒有離別，沒有傷痛，溫暖如花，開滿整個(gè)夏天。 3、多年以后，終于明白，世界上總有兩個(gè)人是天生一對(duì)，有情 <a href="#" onclick="showdiv(this);">...全文</a></p> <div class="content" style="display:none;"> 1、手心捧著的文字，清清淺淺，刻著你的眉，你的眼，素筆深深，想你的日子，光陰開成了一朵思念的花，那妖，那艷?！　? 2、終難忘，年少時(shí)光，偶爾臉紅心跳的告白，沒有離別，沒有傷痛，溫暖如花，開滿整個(gè)夏天?！　? 3、多年以后，終于明白，世界上總有兩個(gè)人是天生一對(duì)，有情的會(huì)相愛，久別的會(huì)重逢，這是你告訴我的答案。　　 4、月色滿空，微涼如斯。你說我不來，你不走，可花期已過，情心已散，我找遍了城市的每個(gè)角落，依然不見你的身影，哭泣的蹲在路邊，像個(gè)孩子?！　? 5、說好的幸福，還未到的明天，就揮手再見，是不是每個(gè)人的青春，都有無法掩飾的傷，與愛有關(guān)，與你有關(guān)?！　? 6、學(xué)會(huì)珍惜和善待對(duì)你好的人，因?yàn)?，不是所有的人，都?huì)對(duì)你掏心掏肺?！　? 7、盛夏，月光傾城。半朵煙花下，我們背靠背沉默著，一直到天明，沒有說話，怕一開口就要轉(zhuǎn)身天涯。 <p class="buttom"> <a href="#" class="btn" onclick="hidediv(this);">收起全文</a> </p> </div> </div> </div> </body></html>

查看完整描述

2 回答

已采納

stone310

TA貢獻(xiàn)361條經(jīng)驗(yàn) 獲得超191個(gè)贊

??function?hidediv(obj){
????????var?y?=?obj.parentNode.parentNode;//這才是正文
????????var?x?=?nextnode(y.previousSibling);//摘要???????
????????//這里有問題，var?x=nextnode方法調(diào)用后會(huì)return正文部分（即x）
????????x.style.display="block";???
????????y.style.display="none";
????}

按照你代碼的意思，nextnode是檢測(cè)元素是否空白節(jié)點(diǎn)，是則略過，不是則檢測(cè)它的下一個(gè)元素；

但是當(dāng)你收縮的時(shí)候，不能再讓它檢測(cè)下一個(gè)元素，而是應(yīng)該去檢測(cè)上一個(gè)元素；

因此，需要添加一個(gè)函數(shù) ? 我這里就命名prevnode

function?prevnode(node){
????if(node.nodeType?==?1){?//判斷是否是元素節(jié)點(diǎn),排除空的文本節(jié)點(diǎn)
????????return?node;
????}
????if(node.previousSibling){???????????????????//檢測(cè)上一個(gè)節(jié)點(diǎn)時(shí)候存在
????????return?prevnode(node.previousSibling);????//存在時(shí)，繼續(xù)檢測(cè)上一個(gè)節(jié)點(diǎn)是否空白節(jié)點(diǎn)
????}
}

收縮按鈕，調(diào)用prevnode方法，整片JS代碼如下：

????<script>
????????/*function?showdiv(obj)?{
?????????var?x?=?obj.parentNode;//摘要;
?????????var?y?=?x.nextSibling;//正文;
?????????x.style.display?=?"none";
?????????y.style.display?=?"block"
?????????};
?????????function?hidediv(obj)?{
?????????var?y?=?obj.parentNode.parentNode;
?????????var?x?=?y.previousSibling;
?????????x.style.display?=?"block";
?????????y.style.display?=?"none";
?????????}*/
????????function?showdiv(obj){
????????????var?x=obj.parentNode;//摘要
????????????var?y=nextnode(x.nextSibling);//正文
????????????x.style.display="none";
????????????y.style.display="block"
????????}
????????function?hidediv(obj){
????????????var?y?=?obj.parentNode.parentNode;//這才是正文
????????????var?x?=?prevnode(y.previousSibling);//摘要
????????????console.log(x)
????????????console.log(y)
????????????x.style.display="block";
????????????y.style.display="none";
????????}
????????function?nextnode(node){
????????????if(node.nodeType?==?1){?//判斷是否是元素節(jié)點(diǎn),排除空的文本節(jié)點(diǎn)
????????????????return?node;
????????????}
????????????if(node.nextSibling){
????????????????return?nextnode(node.nextSibling);
????????????}
????????}
????????function?prevnode(node){????//新增加函數(shù)
????????????if(node.nodeType?==?1){?//判斷是否是元素節(jié)點(diǎn),排除空的文本節(jié)點(diǎn)
????????????????return?node;
????????????}
????????????if(node.previousSibling){
????????????????return?prevnode(node.previousSibling);
????????????}
????????}
????</script>

反對(duì) 回復(fù) 2016-09-13