欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實(shí)現(xiàn)超簡單的展開、折疊目錄代碼

 更新時間：2015年08月28日 14:52:22   作者：企鵝  
這篇文章主要介紹了js實(shí)現(xiàn)超簡單的展開、折疊目錄代碼,通過javascript操作鼠標(biāo)點(diǎn)擊事件控制頁面元素樣式的動態(tài)改變實(shí)現(xiàn)該功能,非常簡單實(shí)用,需要的朋友可以參考下

本文實(shí)例講述了js實(shí)現(xiàn)超簡單的展開、折疊目錄代碼。分享給大家供大家參考。具體如下：

這里介紹一款超簡單的目錄，展開菜單代碼，鼠標(biāo)點(diǎn)擊即可展開，再次點(diǎn)擊即可合攏，類似樹形菜單的功能，網(wǎng)上見過很多，不多做介紹了，歡迎參考。

運(yùn)行效果截圖如下：

在線演示地址如下：

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程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評論