本文實例講述了js實現超簡單的展開、折疊目錄代碼。分享給大家供大家參考。具體如下:
這裡介紹一款超簡單的目錄,展開菜單代碼,鼠標點擊即可展開,再次點擊即可合攏,類似樹形菜單的功能,網上見過很多,不多做介紹了,歡迎參考。
運行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/js/2015/js-show-hidden-list-menu-codes/
具體代碼如下:
<title>可折疊展開的簡單目錄</title> <style> div{ font-size:12px; color:red; background-color: #EAEAE8; border: 1 solid #1892B5; padding: 1 } </style> <div id="main1" style="color:blue" onclick="document.all.child1.style.display=(document.all.child1.style.display =='none')?'':'none'" > + 主目錄1</div> <div id="child1" style="display:none"> <a href="#">- 子目錄1</a> <br> <a href="#">- 子目錄2</a> <br> <a href="#">- 子目錄3</a> <br> <a href="#">- 子目錄4</a> </div> <div id="main2" style="color:blue" onclick="document.all.child2.style.display=(document.all.child2.style.display =='none')?'':'none'" > + 主目錄2 </div> <div id="child2" style="display:none"> <a href="#">- 子目錄1</a> <br> <a href="#">- 子目錄2</a> <br> <a href="#">- 子目錄3</a> </div>
希望本文所述對大家的javascript程序設計有所幫助。