快捷導(dǎo)航

javascript顯示隱藏層比較不錯(cuò)的方法分析

更新時(shí)間：2008年09月30日 00:34:20 作者：

通常的解決辦法是把“答案”當(dāng)作整個(gè)問題容器的子元素，然后點(diǎn)擊父元素上的按鈕后展開對應(yīng)的子元素。通過父子元素的對應(yīng)關(guān)系來匹配標(biāo)題和答案。

這是一個(gè)Q&A的頁面，設(shè)計(jì)師希望能夠點(diǎn)擊相關(guān)的問題后，在它下方顯示對應(yīng)的答案。這是一個(gè)比較常見功能，通常的解決辦法是把“答案”當(dāng)作整個(gè)問題容器的子元素，然后點(diǎn)擊父元素上的按鈕后展開對應(yīng)的子元素。通過父子元素的對應(yīng)關(guān)系來匹配標(biāo)題和答案。

但是當(dāng)初寫html的時(shí)候并沒有考慮到腳本編寫（需求是后加的），所以，答案和標(biāo)題沒有父子關(guān)系可以對應(yīng)。 html代碼如下。

所以，這里需要用到另一種方法來匹配答案和標(biāo)題。我們可以通過捕捉元素的位置來匹配它們。也就是說第一條標(biāo)題，對應(yīng)的肯定是整個(gè)序列中的第一條答案，第二條標(biāo)題對應(yīng)的肯定是第二條答案。這樣就可以無視html結(jié)構(gòu)來控制它們的對應(yīng)關(guān)系了。

復(fù)制代碼代碼如下:

<ul class="qusetionList"> 
<li class="liHeader"><span class="colABC-A">編號</span><span class="colABC-B">標(biāo)題</span><span class="colABC-C">編輯者/發(fā)問者</span></li> 

<li class="liBody"><span class="colABC-A">1</span><span class="colABC-B">想要開小店需要付費(fèi)嗎?</span><span class="colABC-C"><a href="#" title="" class="openLink"></a> 客服</span></li> 
<li class="answer"><span class="colABC-B"> 
現(xiàn)階段於策視其所以不收取任何費(fèi)用，請使用者不用擔(dān)心。<BR> 
除了加值服務(wù)的功能模組之外。</span><span class="colABC-C"><a href="#" title="" class="closeLink"></a> 客服</span></li> 

<li class="liBody"><span class="colABC-A">2</span><span class="colABC-B">想要開小店需要付費(fèi)嗎?</span><span class="colABC-C"><a href="#" title="" class="openLink"></a> 客服</span></li> 
<li class="answer"><span class="colABC-B"> 
現(xiàn)階段於策視其所以不收取任何費(fèi)用，請使用者不用擔(dān)心。<BR> 
除了加值服務(wù)的功能模組之外。</span><span class="colABC-C"><a href="#" title="" class="closeLink"></a> 客服</span></li> 
</ul> 

腳本解釋：當(dāng)點(diǎn)擊openLink這個(gè)圖標(biāo)時(shí)，顯示和openLink在序列中位置相同的answer。這里需要將onclick事件放在閉包里面，等到for循環(huán)結(jié)束后才被激活。如果沒有這層閉包，那不管點(diǎn)擊哪個(gè)openLink，顯示的都將是openLink.length的值。

復(fù)制代碼代碼如下:

document.getElementsByClassName = function(eleClassName) 
{ 
var getEleClass = [];//定義一個(gè)數(shù)組 
var myclass = new RegExp("\\b"+eleClassName+"\\b");//創(chuàng)建一個(gè)正則表達(dá)式對像 
var elem = this.getElementsByTagName("*");//獲取文檔里所有的元素 
for(var h=0;h<elem.length;h++) 
{ 
var classes = elem[h].className;//獲取class對像 
if (myclass.test(classes)) getEleClass.push(elem[h]);//正則比較，取到想要的CLASS對像 
} 
return getEleClass;//返回?cái)?shù)組 
} 
//上面這是捕捉class的方法，我一直用它，復(fù)制過來就OK。 

var answer = document.getElementsByClassName("answer"); 
var openLink = document.getElementsByClassName("openLink"); 
var closeLink = document.getElementsByClassName("closeLink"); 

for (i = 0; i< openLink.length ; i++ ) 
{ 
( 
function(i){ 
openLink[i].onclick = function (){ 
var j = i; 
answer[j].style.display = "block" 
} 
closeLink[i].onclick = function (){ 
var j = i; 
answer[j].style.display = "none" 
} 
} 
)(i); 
}