如何实现简单的FAQ折叠效果老猫的理想 - 共享社区

共享社区互联网资源共享社区 网页资料共享如何实现简单的FAQ折叠效果

1 / 1 页

跳转页

查看:1306

如何实现简单的FAQ折叠效果

个人空间
组别:版主
性别:
来自:
积分:175
帖子:175
注册: 2008-01-04

2008-01-25 15:49 | 只看楼主

树型| 收藏| 小中大 1

如何实现简单的FAQ折叠效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>"> <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>"> <head> <title>FAQ效果aa25.cn</title> <meta http-equiv="Content-Type" c /> <meta name="Author" c /> <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++){     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++)             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.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 aa25.cn </dd></dl> </li> <li> <dl><dt>问题2 </dt><dd>答：2 aa25.cn </dd></dl> </li> <li> <dl><dt>问题3 </dt><dd>答：3 aa25.cn </dd></dl> </li> <li> <dl><dt>问题4 </dt><dd>答：4 aa25.cn </dd></dl> </li> </li> </ul> </body> </html>

<<上一主题|下一主题>>

1 / 1 页

跳转页

共享社区互联网资源共享社区网页资料共享 如何实现简单的FAQ折叠效果

如何实现简单的FAQ折叠效果

如何实现简单的FAQ折叠效果

共享社区互联网资源共享社区网页资料共享如何实现简单的FAQ折叠效果