javascript顯示隱藏層比較不錯的方法分析

這是一個Q&A的頁面，設計師希望能夠點擊相關的問題後，在它下方顯示對應的答案。這是一個比較常見功能，通常的解決辦法是把“答案”當作整個問題容器的子項目，然後點擊父元素上的按鈕後展開對應的子項目。通過父子項目的對應關係來匹配標題和答案。

但是當初寫html的時候並沒有考慮到指令碼編寫（需求是後加的），所以，答案和標題沒有父子關係可以對應。 html代碼如下。

所以，這裡需要用到另一種方法來匹配答案和標題。我們可以通過捕捉元素的位置來匹配它們。也就是說第一條標題，對應的肯定是整個序列中的第一條答案，第二條標題對應的肯定是第二條答案。 這樣就可以無視html結構來控制它們的對應關係了。

複製代碼 代碼如下:<ul class="qusetionList">
<li class="liHeader"><span class="colABC-A">編號</span><span class="colABC-B">標題</span><span class="colABC-C">編輯者/發問者</span></li>

<li class="liBody"><span class="colABC-A">1</span><span class="colABC-B">想要開小店需要付費嗎?</span><span class="colABC-C"><a href="#" title="" class="openLink"></a> 客服</span></li>
<li class="answer"><span class="colABC-B">
現階段於策視其所以不收取任何費用，請使用者不用擔心。<BR>
除了加值服務的功能模組之外。</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">想要開小店需要付費嗎?</span><span class="colABC-C"><a href="#" title="" class="openLink"></a> 客服</span></li>
<li class="answer"><span class="colABC-B">
現階段於策視其所以不收取任何費用，請使用者不用擔心。<BR>
除了加值服務的功能模組之外。</span><span class="colABC-C"><a href="#" title="" class="closeLink"></a> 客服</span></li>
</ul>

指令碼解釋：當點擊openLink這個表徵圖時，顯示和openLink在序列中位置相同的answer。這裡需要將onclick事件放在閉包裡面，等到for迴圈結束後才被啟用。如果沒有這層閉包，那不管點擊哪個openLink，顯示的都將是openLink.length的值。

複製代碼 代碼如下:document.getElementsByClassName = function(eleClassName)
{
var getEleClass = [];//定義一個數組
var myclass = new RegExp("\\b"+eleClassName+"\\b");//建立一個Regex對像
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;//返回數組
}
//上面這是捕捉class的方法，我一直用它，複製過來就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);
}