javascript展開與收起效果
阿新 • • 發佈：2019-02-20
簡單的做了一個顯示與隱藏的效果，當然有一些坑點。
比如喜歡上了在標籤內部繫結DOM事件，而不是在javascript內繫結事件。
好處是隻需要寫好函式就可以繫結引用了；
在修改css樣式時，正確程式碼應該是：
document.getElementById("hidbox").style.display="block";
我的程式碼是：
document.getElementById("hidbox").style=“display：block";
還有，在行內新增javascript時，正確的程式碼應該是：
href="javascript:showbox()"
我的程式碼是：
href="script:showbox()"
下面附上慕課的原始碼：
| <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 |
| <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> |