简单的FAQ折叠效果

Posted on 2008-06-13 11:00 analyzer 阅读(352) 评论(0) 收藏举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>runcode</title>

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>

*,html,body{margin:0;padding:0}

#faq dt{font-weight:bold;cursor:pointer}

#faq dd{display:none;}

</style>

</head>

<body>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</body>

</html>

刷新页面返回顶部

Lee's 程序人生

公告

简单的FAQ折叠效果