Javascript 展开收起
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>展开收起</title> 6 <style type="text/css"> 7 body{ 8 margin: 0 auto; 9 padding: 0px; 10 } 11 #pn{ 12 background: #e8e8e8; 13 width: 600px; 14 height: auto; 15 margin: 0 auto; 16 padding: 5px; 17 font-size: 9pt; 18 } 19 .slide{ 20 margin: 0; 21 padding: 0; 22 width: 600px; 23 border-top: solid 4px gray; 24 margin: 0 auto; 25 } 26 .btn-slide{ 27 background: gray; 28 text-decoration: none; 29 text-align: center; 30 width: 120px; 31 height: 30px; 32 padding: 10px 0 0 0; 33 display: block; 34 color: #FFF; 35 margin: 0 auto; 36 } 37 </style> 38 <script type="text/javascript"> 39 function showdiv() {//展开函数 40 document.getElementById('hpn').style.display="block"; 41 document.getElementById('strHref').innerHTML="收起"; 42 document.getElementById('strHref').href="javascript:hidediv()"; 43 } 44 function hidediv() {//收起函数 45 document.getElementById('hpn').style.display="none"; 46 document.getElementById('strHref').innerHTML="展开"; 47 document.getElementById('strHref').href="javascript:showdiv()"; 48 } 49 </script> 50 </head> 51 <body> 52 <div id="pn"> 53 <p> 54 手机 - 商品筛选</p> 55 <p> 56 网络:移动4G 联通3G 电信3G</p> 57 <div id="hpn" style="display: none"> 58 <p> 59 价格:5000元以上 4000-4999 3000元以下</p> 60 <p> 61 特点:0元购机 防水 长待机</p> 62 </div> 63 </div> 64 <p class="slide"> 65 <a href="javascript:showdiv()" id="strHref" class="btn-slide">展开</a> <!--点击按钮--> 66 </p> 67 </body> 68 </html>