1.slide.html内容如下

<!DOCTYPEhtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>slide</title><linkrel="stylesheet"href="slide.css"></head><body><divid="pn"><p>商品筛选</p><p>网络:移动4G,联通3G,电信3G</p><divid="hpn"><p>价格:5000</p><p>特点....</p></div></div><pclass="slide"><ahref="javascript:showDiv()"id="strHref"class="btn-slide">更多选项+</a></p><scriptsrc="slide.js"></script></body></html>


2.slide.js内容如下

functionshowDiv(){document.getElementById("hpn").style.display="block";document.getElementById("strHref").innerHTML="收起-";document.getElementById("strHref").href="javascript:hideDiv()";}functionhideDiv(){document.getElementById("hpn").style.display="none";document.getElementById("strHref").innerHTML="更多选项+";document.getElementById("strHref").href="javascript:showDiv()";}


3.slide.css内容如下

body{margin:0auto;padding:0;}#pn{background:#e8e8e8;width:600px;display:block;margin:0auto;padding:5px;font-size:9pt;height:auto;}.slide{margin:0auto;padding:0px;width:600px;border-top:solid4pxgray;}.btn-slide{background:gray;width:120px;height:30px;text-align:center;margin:0auto;display:block;color:#fff;text-decoration:none;padding:10px000;}