js實(shí)現(xiàn)超簡(jiǎn)單的展開、折疊目錄代碼
更新時(shí)間：2015年08月28日 14:52:22 作者：企鵝
這篇文章主要介紹了js實(shí)現(xiàn)超簡(jiǎn)單的展開、折疊目錄代碼,通過javascript操作鼠標(biāo)點(diǎn)擊事件控制頁(yè)面元素樣式的動(dòng)態(tài)改變實(shí)現(xiàn)該功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
本文實(shí)例講述了js實(shí)現(xiàn)超簡(jiǎn)單的展開、折疊目錄代碼。分享給大家供大家參考。具體如下：
這里介紹一款超簡(jiǎn)單的目錄，展開菜單代碼，鼠標(biāo)點(diǎn)擊即可展開，再次點(diǎn)擊即可合攏，類似樹形菜單的功能，網(wǎng)上見過很多，不多做介紹了，歡迎參考。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-show-hidden-list-menu-codes/
具體代碼如下：
<title>可折疊展開的簡(jiǎn)單目錄</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>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JS+CSS實(shí)現(xiàn)的簡(jiǎn)單折疊展開多級(jí)菜單效果
- js實(shí)現(xiàn)可折疊展開的手風(fēng)琴菜單效果
- Js操作樹節(jié)點(diǎn)自動(dòng)折疊展開的幾種方法
- js實(shí)現(xiàn)簡(jiǎn)單折疊、展開菜單的方法
- JS實(shí)現(xiàn)鼠標(biāo)滑過折疊與展開菜單效果代碼
- js實(shí)現(xiàn)選項(xiàng)卡內(nèi)容切換以及折疊和展開效果【推薦】
- JS實(shí)現(xiàn)可展開折疊層的鼠標(biāo)拖曳效果
- JavaScript實(shí)現(xiàn)兼容IE6的收起折疊與展開效果實(shí)例
- JS實(shí)現(xiàn)適合于后臺(tái)使用的動(dòng)畫折疊菜單效果
- JS實(shí)現(xiàn)的簡(jiǎn)單折疊展開動(dòng)畫效果示例
相關(guān)文章
用JS實(shí)現(xiàn)的radio圖片選擇按鈕效果2010-01-01
可以支持多中格式的JS鍵盤...2007-05-05
Typescript 函數(shù)重載的實(shí)現(xiàn)
本文主要介紹了Typescript 函數(shù)重載的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
JS、CSS和HTML實(shí)現(xiàn)注冊(cè)頁(yè)面
這篇文章主要為大家詳細(xì)介紹了JS、CSS和HTML實(shí)現(xiàn)注冊(cè)頁(yè)面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
前端實(shí)現(xiàn)添加水印功能的常見方式小結(jié)
前端水印就是在網(wǎng)頁(yè)或應(yīng)用程序的前端界面上添加的一種標(biāo)記,通常是文本、圖標(biāo)或圖案等形式,下面小編就來和大家介紹四個(gè)常用的方法吧2025-03-03
這篇文章主要給大家總結(jié)介紹了關(guān)于在JS中如何輕松遍歷對(duì)象屬性的方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
click方法可以用來模擬用戶點(diǎn)擊。有的瀏覽器中所有元素都具有click方法，有的瀏覽器則沒有。2011-07-07
用js對(duì)上傳的文件大小以及格式進(jìn)行初步的判斷，在服務(wù)端再進(jìn)行一次判斷（防止瀏覽器拒絕執(zhí)行腳本文件)下面有個(gè)不錯(cuò)的方法大家可以參考下2013-11-11
這篇文章主要介紹了JavaScript數(shù)組迭代器的用法,涉及javascript數(shù)組操作的相關(guān)技巧,需要的朋友可以參考下2015-06-06
javascript搜索框點(diǎn)擊文字消失失焦時(shí)文本出現(xiàn)
這篇文章主要介紹了javascript實(shí)現(xiàn)搜索框點(diǎn)擊文字消失失焦時(shí)文本出現(xiàn)的效果，示例代碼如下，大家可以看看2014-09-09