當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

js树形菜单

發布時間：2024/1/23 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 js树形菜单小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

第一步：HTML頁面設計

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>樹形菜單</title><link rel="stylesheet" href="../css/tree.css" /><script src="../js/tree.js"></script></head><body><ul id="outerul"><li>名站導航<ul><li><a href="#">畢麗巴</a></li><li><a href="#">旅游吧</a><ul><li>麗江</li><li>杭州</li><li>呼倫貝爾</li></ul></li><li><a href="#">狗粑粑</a></li><li><a href="#">驢媽媽</a></li></ul></li><li>常用軟件<ul><li>流氓軟件</li><li>網絡安全</li><li>理財軟件</li><li>天貓多多</li></ul></li><li>熱門游戲<ul><li>王者農藥</li><li>絕地求死</li><li>大話東游</li><li>狗熊聯盟</li></ul></li><li>美女娛樂<ul><li>趙麗英</li><li>林枝玲</li><li>范冰桶</li><li>安氣辣</li></ul></li></ul></body> </html>

第二步：CSS樣式設計

body{font-size: 12px;line-height: 20px;} #outerul{text-align: left;margin:0px;padding: 0;cursor: pointer; } #outerurl ul lia{text-decoration: none;color:black; } #outerul li{margin:-2px 0 0 -20px;padding: 0;list-style: none; } #outerul .plus{float:left;width:32px;height: 15px;background-position: 0 50%;background-repeat: no-repeat;background-size: cover;border:1px solid #FF0000; } #outerul .sub{float: left;width:18px;height: 15px;background-position: 0 50%;background-size: cover;background-repeat: no-repeat; } /*.test{display: block;background-repeat: no-repeat;}*/

第三部：JS設計

/*樹形菜單：冒泡排序*/ var menu,subMenus,menuIcon;function init(){menuArray=document.getElementById('outerul').getElementsByTagName('li');for(var i=0;i<menuArray.length;i++){subMenus=menuArray[i].getElementsByTagName('ul');if(subMenus.length>0){menuIcon=document.createElement('span');menuIcon.className='plus';menuIcon.style.backgroundImage='url(../img/plus.jpg)';menuIcon.onclick=function(){showHide(this.parentNode);}menuArray[i].insertBefore(menuIcon,menuArray[i].firstChild);subMenus[0].style.display='none';}else{menuIcon=document.createElement('span');menuIcon.className='sub';menuIcon.style.backgroundImage='url(../img/2.jpg)';menuArray[i].insertBefore(menuIcon,menuArray[i].firstChild);}//end if} } /*隱藏方法*/ function showHide(parentNode){var ul=parentNode.getElementsByTagName('ul')[0];ul.style.display=(ul.style.display=='none')?'block':'none';var span=parentNode.getElementsByTagName('span')[0];span.style.backgroundImage=(ul.style.display=='none')?'url(../img/plus.jpg':'url(../img/sub.jpg)'; } window.onload=init;

效果如下：

WEB入門實踐視頻課：https://edu.csdn.net/course/detail/8502

總結

以上是生活随笔為你收集整理的js树形菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

js
菜单

上一篇：第04篇 JDK版本导致Unsuppor
下一篇：游戏TAB滚动效果