js树形菜单
【摘要】
第一步：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;
效果如下：
WEB入门实践视频课：https://edu.csdn.net/course/detail/8502
文章来源: aaaedu.blog.csdn.net，作者：tea_year，版权归原作者所有，如需转载，请联系作者。
原文链接：aaaedu.blog.csdn.net/article/details/103026267
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）