- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

js树形菜单

tea_year 发表于 2021/12/23 01:11:48 2021/12/23

【摘要】第一步：HTML页面设计 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>树形菜单</title> <link rel="stylesheet" href="../css/tree....

第一步：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;