JavaScript實現簡單的樹形菜單效果
更新時間:2017年06月23日 09:59:00 作者:斯丟皮德曼
這篇文章主要為大家詳細介紹了JavaScript實現簡單的樹形菜單效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
簡單的一個樹形菜單,具體內容如下
<!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="">文學藝術</a> </ul> <ul id="art" 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> <ul> <a href="javascript:onclickfclose('fangc')"><img src="images/fclose.gif" alt="">房產論壇</a> </ul> <ul id="fangc" 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> <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="">風景圖畫</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> <ul> <a href="javascript:onclickfclose('bagua')"><img src="images/fclose.gif" alt="">娛樂八卦</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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
cocos creator Touch事件應用(觸控選擇多個子節(jié)點的實例)
下面小編就為大家?guī)硪黄猚ocos creator Touch事件應用(觸控選擇多個子節(jié)點的實例)。小編覺得挺不錯的,現在就想給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09Web 開發(fā)中Ajax的Session 超時處理方法
下面小編就為大家?guī)硪黄猈eb 開發(fā)中Ajax的Session 超時處理方法。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-01-01javascript-TreeView父子聯(lián)動效果保持節(jié)點狀態(tài)一致
javascript-TreeView父子聯(lián)動效果保持節(jié)點狀態(tài)一致...2007-08-08