js實作超簡單的展開、折疊目錄程式碼_javascript技巧

本文實例講述了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')&#63;'':'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')&#63;'':'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程式設計有所幫助。