首頁 > 開發者 > JavaScript
JavaScript可以實現豐富的網頁顯示效果，為了在Redmine中實現程式碼摺疊功能，我在網上找了很久，最後終於發現一段JavaScript代碼，可以作出摺疊效果，實現起來也很簡單，代碼如下所示：
<!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> <title></title> <script type="text/javascript"> function toggle(sDivId) { var oDiv = document.getElementById(sDivId); oDiv.style.display = (oDiv.style.display == "none") ? "block" : "none"; } </script> </head> <body> <div style="background-color:Blue;color:White;font-weight:bold;padding:10px;cursor:pointer" onclick="toggle('divContent1')">Click Here</div> <div id="divContent1" style="border:3px solid blue;height:100px;padding:10px"> This is some content to show and hide. </div> <br /> <div style="background-color:Blue;color:White;font-weight:bold;padding:10px;cursor:pointer" onclick="toggle('divContent2')">Click Here</div> <div id="divContent2" style="border:3px solid blue;height:100px;padding:10px"> This is some content to show and hide. </div> </body> </html>
這段代碼利用了CSS的display特性，display的特性值有：none和block。none即為隱藏，block為顯示。
顯示地區分為兩個地區：標題列和內容地區。標題列總是可見的，內容部分可以摺疊或展開。在頁面上，可以使用兩個<div>元素分別實現這個設計。最後的顯示效果如所示：
壓縮時：
展開時：
應該說，JavaScript實現這樣的效果是比較簡單的，對應到Redmine要達到的效果，就是把代碼分成兩部分，分別用不同的<div>分開。一部分是兩個版本代碼不同的地方，固定顯示，另一部分是兩個版本代碼相同的部分，由一個按鈕控制，按下和鬆開分別對應顯示和不顯示。
現在Redmine的實現是直接不顯示相同的部分，看原始碼沒有發現它是怎麼省略不需要的部分的，要把這段JavaScript程式整合進Redmine還要進一步研究一下。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
