js下拉菜单学习
<!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>无标题文档</title>
</head>
<script>
lastFirstfaq=null
window.onload=function(){
var faq=document.getElementById("faq")
var dls=faq.getElementsByTagName('dl')
for(var i=0,dl;dl=dls[i];i++){
dt=dls[i].getElementsByTagName('dt')[0]
this.id="faq_"+(Math.random()*100)
dt.onclick=function(){
var p=this.parentNode;//取得父节点
if(lastFirstfaq!=null&&this.id!=lastFirstfaq.id){
var dds=lastFirstfaq.getElementsByTagName('dd');
for(var i=0,dd;dd=dds[i];i++){
dd.style.display='none';
}
}
lastFirstfaq=this;
var dds=p.getElementsByTagName('dd');
var tempDisplay='none';
if(gs(dds[0],"display")=='none')
tempDisplay='block';
for(var i=0;i<dds.length;i++){
dds[i].style.display=tempDisplay;
}
}
}
}
function gs(d,a){
if(d.currentStyle){
curVal=d.currentStyle[a]
}else{
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>
<body>
<ul id="faq">
<li>
<dl><dt>问题1 </dt><dd>答：1 </dd><dd>答：11 </dd><dd>答：22 </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>
</body>
</html>
