JavaScript實(shí)現(xiàn)簡(jiǎn)單的樹形菜單效果
簡(jiǎn)單的一個(gè)樹形菜單,具體內(nèi)容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>樹形菜單</title> <style> body { font: 12px/20px 宋體; } img { vertical-align: center; border: none; } a { text-decoration: none; color: #000; } li { list-style: none; } </style> <script> function onclickfclose(id) { var ul = document.getElementById(id); var objv = ul.style.display; if (objv == 'none') { ul.style.display = 'block' } else { ul.style.display = 'none'; } } </script> </head> <body> <b><img src="images/fold.gif" alt="">樹形菜單</b> <ul> <a href="javascript:onclickfclose('art')"><img src="images/fclose.gif" alt="">文學(xué)藝術(shù)</a> </ul> <ul id="art" style="display: none;"> <li><img src="images/doc.gif" alt="">著名小說(shuō)</li> <li><img src="images/doc.gif" alt="">著名小說(shuō)</li> <li><img src="images/doc.gif" alt="">著名小說(shuō)</li> <li><img src="images/doc.gif" alt="">著名小說(shuō)</li> </ul> <ul> <a href="javascript:onclickfclose('fangc')"><img src="images/fclose.gif" alt="">房產(chǎn)論壇</a> </ul> <ul id="fangc" style="display: none;> <li><img src=" images/doc.gif" alt="">房產(chǎn)推銷</li> <li><img src="images/doc.gif" alt="">房產(chǎn)推銷</li> <li><img src="images/doc.gif" alt="">房產(chǎn)推銷</li> <li><img src="images/doc.gif" alt="">房產(chǎn)推銷</li> </ul> <ul> <a href="javascript:onclickfclose('tuhua')"><img src="images/fclose.gif" alt="">提圖專區(qū)</a> </ul> <ul id="tuhua" style="display: none;> <li><img src=" images /doc.gif" alt="">風(fēng)景圖畫</li> <li><img src="images/doc.gif" alt="">風(fēng)景圖畫</li> <li><img src="images/doc.gif" alt="">風(fēng)景圖畫</li> <li><img src="images/doc.gif" alt="">風(fēng)景圖畫</li> </ul> <ul> <a href="javascript:onclickfclose('bagua')"><img src="images/fclose.gif" alt="">娛樂(lè)八卦</a> </ul> <ul id="bagua" style="display: none;> <li><img src=" images /doc.gif" alt="">明星采訪</li> <li><img src="images/doc.gif" alt="">明星采訪</li> <li><img src="images/doc.gif" alt="">明星采訪</li> <li><img src="images/doc.gif" alt="">明星采訪</li> </ul> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 一個(gè)簡(jiǎn)單的js樹形菜單
- JS無(wú)限極樹形菜單,json格式、數(shù)組格式通用示例
- json+jQuery實(shí)現(xiàn)的無(wú)限級(jí)樹形菜單效果代碼
- Bootstrap樹形菜單插件TreeView.js使用方法詳解
- Vue.js組件tree實(shí)現(xiàn)無(wú)限級(jí)樹形菜單
- JS+CSS實(shí)現(xiàn)TreeMenu二級(jí)樹形菜單完整實(shí)例
- JS+CSS簡(jiǎn)單樹形菜單實(shí)現(xiàn)方法
- javascript實(shí)現(xiàn)在下拉列表中顯示多級(jí)樹形菜單的方法
- 用JS做的簡(jiǎn)單的可折疊的兩級(jí)樹形菜單
- Vue.js 遞歸組件實(shí)現(xiàn)樹形菜單(實(shí)例分享)
相關(guān)文章
JavaScript中變量提升和函數(shù)提升實(shí)例詳解
這篇文章主要給大家介紹了關(guān)于JavaScript中變量提升和函數(shù)提升的相關(guān)資料,以及JS變量提升和函數(shù)提升的順序,文中給出了詳細(xì)的介紹,需要的朋友可以參考下2021-07-07教你用Uniapp實(shí)現(xiàn)微信小程序的GPS定位打卡
地圖組件用于展示地圖,而定位API只是獲取坐標(biāo),請(qǐng)勿混淆兩者,下面這篇文章主要給大家介紹了關(guān)于如何使用Uniapp實(shí)現(xiàn)微信小程序的GPS定位打卡的相關(guān)資料,需要的朋友可以參考下2022-11-11鼠標(biāo)點(diǎn)擊input,顯示瞬間的邊框顏色,對(duì)之修改與隱藏實(shí)例
下面小編就為大家?guī)?lái)一篇鼠標(biāo)點(diǎn)擊input,顯示瞬間的邊框顏色,對(duì)之修改與隱藏實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧,祝大家游戲愉快哦2016-12-12JavaScript基礎(chǔ)語(yǔ)法之js表達(dá)式
這篇文章主要介紹了JavaScript基礎(chǔ)語(yǔ)法之js表達(dá)式 的相關(guān)資料,需要的朋友可以參考下2016-06-06javascript實(shí)現(xiàn)的LI列表輸出,隔行同色的代碼
javascript實(shí)現(xiàn)的LI列表輸出,隔行同色的代碼...2007-10-10cocos creator Touch事件應(yīng)用(觸控選擇多個(gè)子節(jié)點(diǎn)的實(shí)例)
下面小編就為大家?guī)?lái)一篇cocos creator Touch事件應(yīng)用(觸控選擇多個(gè)子節(jié)點(diǎn)的實(shí)例)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就想給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09JavaScript實(shí)現(xiàn)簡(jiǎn)單音樂(lè)播放器
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單音樂(lè)播放器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11Web 開發(fā)中Ajax的Session 超時(shí)處理方法
下面小編就為大家?guī)?lái)一篇Web 開發(fā)中Ajax的Session 超時(shí)處理方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01javascript-TreeView父子聯(lián)動(dòng)效果保持節(jié)點(diǎn)狀態(tài)一致
javascript-TreeView父子聯(lián)動(dòng)效果保持節(jié)點(diǎn)狀態(tài)一致...2007-08-08