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><!--<span class="test" style="background-image: url('../img/plus.jpg');"> <!--1.設計網頁布局--><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
總結
- 上一篇： 第04篇 JDK版本导致Unsuppor
- 下一篇： 游戏TAB滚动效果