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.οnclick=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.οnlοad=init;

效果如下：

WEB入门实践视频课：https://edu.csdn.net/course/detail/8502

tea_year 博客专家

发布了670 篇原创文章 · 获赞 631 · 访问量 126万+

他的留言板关注

猜你喜欢