JavaScript配合CSS实现Div层的展开与收缩功能，代码经过了多次优化，现在兼容性方面做的也相当不错，对IE和火狐等主流浏览器的支持也是挺好的。 示例： <html><br /> <head><br /> <title>div展开收缩代码</title><br /> <style><br /> * { margin:0; padding:0;}<br /> body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;}<br /> h1 { font:125% Arial, Helvetica, sans-serif; text-align:left; font-weight:bolder; background:#333; padding:3px; display:block; color:#99CC00}<br /> .class1 { width:40%; background:#CCC; position:relative; margin:0 auto; padding:5px;}<br /> span { position:absolute; right:10px; top:8px; cursor: pointer; color:yellow;}<br /> p { text-align:left; line-height:20px; background:#333; padding:3px; margin-top:5px; color:#99CC00}<br /> #class1content, #class2content,#class3content { height:50px;overflow:hidden;display:none;}<br /> </style><br /> <script><br /> function $(element){<br /> return element = document.getElementById(element);<br /> }<br /> function $D(element){<br /> var d=$(element);<br /> var h=d.offsetHeight;<br /> var maxh=300;<br /> function dmove(){<br /> if(h>=maxh){<br /> d.style.height='300px';<br /> clearInterval(iIntervalId);<br /> }else{<br /> h+=50; //设置层展开的速度<br /> d.style.display='block';<br /> d.style.height=h+'px';<br /> }<br /> }<br /> iIntervalId=setInterval(dmove,2);<br /> }<br /> function $D2(element){<br /> var d=$(element);<br /> var h=d.offsetHeight;<br /> var maxh=300;<br /> function dmove(){<br /> if(h<=0){<br /> d.style.display='none';<br /> clearInterval(iIntervalId);<br /> }else{<br /> h-=50;//设置层收缩的速度<br /> d.style.height=h+'px';<br /> }<br /> }<br /> iIntervalId=setInterval(dmove,2);<br /> }<br /> function $use(targetid,objN){<br /> var d=$(targetid);<br /> var sb=$(objN);<br /> if (d.style.display=="block"){<br /> $D2(targetid);<br /> d.style.display="none";<br /> sb.innerHTML="展开";<br /> } else {<br /> var p=document.getElementsByTagName("p");<br /> var span=document.getElementsByTagName("span");<br /> for(var i=0,l=p.length;i<l;i++){<br /> if(p[i]!=d){<br /> p[i].style.height=0;<br /> p[i].style.display="none";<br /> span[i].innerHTML="展开";<br /> }<br /> }<br /> $D(targetid);<br /> d.style.display="block";<br /> sb.innerHTML='收缩';<br /> }<br /> }<br /> </script><br /> </head><br /> <body><br /> <div class="class1"><br /> <h1>div展开收缩效果</h1><br /> <span id="stateBut" onClick="$use('class1content','stateBut')">展开</span><br /> <p id="class1content">something.........</p><br /> </div><br /> <div class="class1"><br /> <h1>div展开收缩效果</h1><br /> <span id="stateBut1" onClick="$use('class2content','stateBut1')">展开</span><br /> <p id="class2content">something.........</p><br /> </div><br /> <div class="class1"><br /> <h1>div展开收缩效果</h1><br /> <span id="stateBut2" onClick="$use('class3content','stateBut2')">展开</span><br /> <p id="class3content">wojiade</p><br /> </div><br /> </body><br /> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>提示：可修改后代码再运行! 文章导航 延迟打开层，打开网页几秒后弹出可关闭的浮动层仿淘宝网产品列表的收起展开、隐藏显示代码
