<!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> <style type="text/css"> body { margin: 0 auto; padding: 0; } a:focus { outline: none; } #pn { background: #e8e8e8; width: 600px; display: block; margin: 0 auto; padding: 5px; font-size: 9pt; height: auto; } .slide { margin: 0; padding: 0; width: 600px; border-top: solid 4px gray; margin: 0 auto; } .btn-slide { background: gray; text-align: center; width: 120px; height: 30px; padding: 10px 10px 0 0; margin: 0 auto; display: block; color: #fff; text-decoration: none; } </style> <script type="text/javascript"> function showdiv() { document.getElementById("hpn").style.display = "block"; // document.getElementById("pn").style.height='80px'; document.getElementById("strHref").href = "javascript:hidediv();"; document.getElementById("strHref").innerHTML = "收起-"; } function hidediv() { document.getElementById("hpn").style.display = "none"; // document.getElementById("pn").style.height='60px'; document.getElementById("strHref").href = "javascript:showdiv();"; document.getElementById("strHref").innerHTML = "更多选项+"; } </script></head><body> <div> <div id="pn"> <p> 手机 - 商品筛选</p> <p> 网络: 移动4G(TD-LTE ) 联通4G(TD-LTE) 联通3G(WCDMA) </p> <div id="hpn" style="display: none"> <p> 价格: 5000以上 4000-4999 3000-3999 2000-2999 </p> <p> 特点: JDPhone计划 "0"元购机 防水 长待机 1080P全高清屏 </p> </div> </div> <p class="slide"> <a href="javascript:showdiv();" id="strHref" class="btn-slide">更多选项+</a></p> </div></body></html>
<!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> <style type="text/css"> body { margin: 0 auto; padding: 0; } a:focus { outline: none; } #pn { background: #e8e8e8; width: 600px; display: block; margin: 0 auto; padding: 5px; font-size: 9pt; height: auto; } .slide { margin: 0; padding: 0; width: 600px; border-top: solid 4px gray; margin: 0 auto; } .btn-slide { background: gray; text-align: center; width: 120px; height: 30px; padding: 10px 10px 0 0; margin: 0 auto; display: block; color: #fff; text-decoration: none; } </style> <script type="text/javascript"> function showdiv() { document.getElementById("hpn").style.display = "block"; // document.getElementById("pn").style.height='80px'; document.getElementById("strHref").href = "javascript:hidediv();"; document.getElementById("strHref").innerHTML = "收起-"; } function hidediv() { document.getElementById("hpn").style.display = "none"; // document.getElementById("pn").style.height='60px'; document.getElementById("strHref").href = "javascript:showdiv();"; document.getElementById("strHref").innerHTML = "更多选项+"; } </script></head><body> <div> <div id="pn"> <p> 手机 - 商品筛选</p> <p> 网络: 移动4G(TD-LTE ) 联通4G(TD-LTE) 联通3G(WCDMA) </p> <div id="hpn" style="display: none"> <p> 价格: 5000以上 4000-4999 3000-3999 2000-2999 </p> <p> 特点: JDPhone计划 "0"元购机 防水 长待机 1080P全高清屏 </p> </div> </div> <p class="slide"> <a href="#" id="strHref" class="btn-slide" onclick="showdiv()">更多选项+</a></p> </div></body></html>
第二种:
你在点击的时候,给a标签的href添加了URL了,然后就执行了hidediv();方法,所以,它是很快的显示又隐藏了
其实这个不不用写成两个方法,你就写一个方法,然后方法内判断元素是显示还是隐藏就可以了
以下是我给你提供的代码:
手机 - 商品筛选
网络: 移动4G(TD-LTE ) 联通4G(TD-LTE) 联通3G(WCDMA)
这样
<!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> <style type="text/css"> body { margin: 0 auto; padding: 0; } a:focus { outline: none; } #pn { background: #e8e8e8; width: 600px; display: block; margin: 0 auto; padding: 5px; font-size: 9pt; height: auto; } .slide { margin: 0; padding: 0; width: 600px; border-top: solid 4px gray; margin: 0 auto; } .btn-slide { background: gray; text-align: center; width: 120px; height: 30px; padding: 10px 10px 0 0; margin: 0 auto; display: block; color: #fff; text-decoration: none; } </style> <script type="text/javascript"> function showdiv() { document.getElementById("hpn").style.display = "block"; document.getElementById("strHref").innerHTML = "收起-"; document.getElementById("strHref").onclick=hidediv; } function hidediv() { document.getElementById("hpn").style.display = "none"; document.getElementById("strHref").innerHTML = "更多选项+"; document.getElementById("strHref").onclick=showdiv; } </script></head><body> <div> <div id="pn"> <p> 手机 - 商品筛选</p> <p> 网络: 移动4G(TD-LTE ) 联通4G(TD-LTE) 联通3G(WCDMA) </p> <div id="hpn" style="display: none"> <p> 价格: 5000以上 4000-4999 3000-3999 2000-2999 </p> <p> 特点: JDPhone计划 "0"元购机 防水 长待机 1080P全高清屏 </p> </div> </div> <p class="slide"> <a href="javascript:;" id="strHref" class="btn-slide" onclick="showdiv();return false">更多选项+</a></p> </div></body></html>