WEB开发 树形菜单实现
摘要：前端技术开发文档 前端开发环境怎么写 前端 微信公众号开发教程 html 代码 <!doctype html> <html> <head> <meta charset=”utf-8″> <title>树形菜单</titl……
前端技术开发文档 前端开发环境怎么写 前端 微信公众号开发教程
html 代码
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>树形菜单</title>
<style>
* {
margin: 0;
padding: 0
}
ul {
list-style: none
}
a {
text-decoration: none
}
li a {
display: block;
height: 30px;
line-height: 30px;
font-size: 14px;
color: #999;
padding-left: 2em
}
.subMenu {
display: none;
margin-left: 1em
}
.hasSub>a {
display: block;
background-image: url(a1.png);
background-repeat: no-repeat;
background-position: 10px center;
color: #666
}
.showSubmenu>a {
background-image: url(a2.png);
background-position: 11px center;
background-repeat: no-repeat
}
.ac {
color: #000 !important;
background-color: #efefef;
}
#tree {
margin: 100px;
width: 260px;
padding: 10px;
border: 1px solid #777
}
</style>
<script>
window.onload = function () {
var tree = document.getElementById(‘tree’);
var aLi = tree.getElementsByTagName(‘li’);
var aLi_a = tree.getElementsByTagName(‘a’);
for (var i = 0; i < aLi.length; i++) {
//标记有二级菜单的li————————————
var subMenu = aLi[i].children[1];//判断是否有二级菜单
if (subMenu) {
subMenu.className = ‘subMenu’;
aLi[i].className = “hasSub”;
};
//绑定事件——————————————–
aLi[i].show = true;//给自己增加个判断 开/关 自定义属性
aLi[i].onclick = function (ev) {
var oEv = ev || window.event;
oEv.cancelBubble = true;//阻止事件冒泡
//开关 子菜单——————–
var subMenu = this.children[1];//是否有二级菜单
if (this.show) {//判断开关状态
if (subMenu) {
subMenu.style.display = “block”;
this.className = ‘hasSub showSubmenu’;
this.show = false;
}
} else {
subMenu.style.display = “none”;
this.className = ‘hasSub’;
this.show = true;
};
//标记当前a标签——————
for (var j = 0; j < aLi.length; j++) {
aLi_a[j].className = ”;
};
this.children[0].className = ‘ac’;
};
};
}
</script>
</head>
<body>
<div id=”tree”>
<ul class=”tree”>
<li>
<a href=”javascript:;”><i></i>一级菜单</a>
<ul>
<li><a href=”javascript:;”>二级菜单</a></li>
<li><a href=”javascript:;”>二级菜单</a></li>
<li><a href=”javascript:;”>二级菜单</a></li>
<li>
<a href=”javascript:;”>二级菜单</a>
<ul>
<li><a href=”javascript:;”>三级菜单</a>
<ul>
<li><a href=”javascript:;”>四级菜单</a></li>
<li><a href=”javascript:;”>四级菜单</a></li>
<li><a href=”javascript:;”>四级菜单</a>
<ul>
<li><a href=”javascript:;”>五级菜单</a></li>
<li><a href=”javascript:;”>五级菜单</a></li>
<li><a href=”javascript:;”>五级菜单</a></li>
<li><a href=”javascript:;”>五级菜单</a></li>
</ul>
</li>
<li><a href=”javascript:;”>三级菜单</a></li>
</ul>
</li>
<li><a href=”javascript:;”>三级菜单</a></li>
<li><a href=”javascript:;”>三级菜单</a></li>
<li><a href=”javascript:;”>三级菜单</a></li>
</ul>
</li>
<li><a href=”javascript:;”>二级菜单</a></li>
</ul>
</li>
<li>
<a href=”javascript:;”><i></i>一级菜单</a>
<ul>
<li><a href=”javascript:;”>二级菜单</a></li>
<li><a href=”javascript:;”>二级菜单</a></li>
<li><a href=”javascript:;”>二级菜单</a></li>
<li>
<a href=”javascript:;”>二级菜单</a>
<ul>
<li><a href=”javascript:;”>三级菜单</a></li>
<li><a href=”javascript:;”>三级菜单</a></li>
<li><a href=”javascript:;”>三级菜单</a></li>
<li><a href=”javascript:;”>三级菜单</a></li>
</ul>
</li>
<li><a href=”javascript:;”>二级菜单</a></li>
</ul>
</li>
<li>
<a href=”javascript:;”>一级菜单</a>
<ul>
<li><a href=”javascript:;”>二级菜单</a></li>
<li><a href=”javascript:;”>二级菜单</a></li>
<li><a href=”javascript:;”>二级菜单</a></li>
<li>
<a href=”javascript:;”>二级菜单</a>
<ul class=”subMenu”>
<li><a href=”javascript:;”>三级菜单</a></li>
<li><a href=”javascript:;”>三级菜单</a></li>
<li><a href=”javascript:;”>三级菜单</a></li>
<li><a href=”javascript:;”>三级菜单</a></li>
</ul>
</li>
<li><a href=”javascript:;”>二级菜单</a></li>
</ul>
</li>
<li><a href=”javascript:;”>一级菜单</a></li>
</ul>
</div>
</body>
</html>
微信前端界面开发视频教程 重庆前端开发怎么样 前端微信公众号开发坑
» 本文来自：前端开发者 » 《WEB开发 树形菜单实现》
» 本文链接地址：https://www.rokub.com/5418.html
» 您也可以订阅本站：https://www.rokub.com
近期评论