js树形菜单

原创

跟张哥学编程 2021-01-09 20:44:07 ©著作权

文章标签 java 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者跟张哥学编程的原创作品，请联系作者获取转载授权，否则将追究法律责任

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

效果如下：

js树形菜单_java