如何實現簡單的FAQ折疊效果

2009-06-05　來源/作者：懶人圖庫　分類：網站常用　 «»

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>runcode</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.cxj168.com/"/>
<script type="text/javascript">
var lastFaqClick=null;//上次點擊的faq
window.onload=function(){
  var faq=document.getElementById("faq");
  var dls=faq.getElementsByTagName("dl");
  for (var i=0,dl;dl=dls[i];i++){
    var dt=dl.getElementsByTagName("dt")[0];//取得標題
     dt.id = "faq_dt_"+(Math.random()*100);
     dt.onclick=function(){
       var p=this.parentNode;//取得父節點
        if (lastFaqClick!=null&&lastFaqClick.id!=this.id){
          var dds=lastFaqClick.parentNode.getElementsByTagName("dd");
          for (var i=0,dd;dd=dds[i];i++)
            dd.style.display='none';
        }
        lastFaqClick=this;
        var dds=p.getElementsByTagName("dd");//取得該父節點所有的子節點，也就是所有的答案
        var tmpDisplay='none';
        if (gs(dds[0],'display')=='none')
          tmpDisplay='block';
        for (var i=0;i<dds.length;i++)
          dds[i].style.display=tmpDisplay;
      }
  }
}
/**
*取得元素的真實css屬性
*written in 06.7 sheneyan
*/
function gs(d,a){
  if (d.currentStyle){ 
    var curVal=d.currentStyle[a]
  }else{ 
    var curVal=document.defaultView.getComputedStyle(d, null)[a]
  } 
  return curVal;
}
</script>
<style type="text/css">
*,html,body{margin:0;padding:0}
#faq dt{font-weight:bold;cursor:pointer}
#faq dd{display:none;}
</style>
</head>
<body>
<ul id="faq">
<li>
<dl><dt>問題1 </dt><dd>答：1 </dd></dl>
</li>
<li>
<dl><dt>問題2 </dt><dd>答：2 </dd></dl>
</li>
<li>
<dl><dt>問題3 </dt><dd>答：3 </dd></dl>
</li>
<li>
<dl><dt>問題4 </dt><dd>答：4 </dd></dl>
</li>
</li>
</ul>
<p><a href="http://www.cxj168.com" target="_blank">懶人圖庫</a></p>
</body>
</html>

運行代碼保存代碼提示：您可以先修改部分代碼再運行，保存代碼功能在Firefox下無效。

標簽：網站常用