js树形菜单

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