老裴帮助关于javascript+css菜单树的小练习
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>树菜单</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div.treeborder{
width:200px;
height:auto;
border:1px solid green;
padding:0px;
margin:0px;
font-size:13px;
}
#treemenu{
list-style:none;
margin:0px;
padding:0px;
padding-left:10px;
}
#treemenu:hover{
cursor:pointer;
}
#treemenu ul{
list-style:none;
margin:0px;
padding:0px;
padding-left:30px;
}
#treemenu ul:hover{
cursor:pointer;
}
#treemenu li{
margin:0px;
padding:0px;
padding-bottom:2px;
}
#treemenu a{
text-decoration:none;
}
#treemenu a:hover{
text-decoration:underline;
color:green;
}
span.title{
margin:0px;
padding:4px;
font-weight:bold;
}
</style>
</head>
<script type="text/javascript">
/**
展示/隐藏下级菜单
*/
function displayNext(_spanId,_ulId,_menuName){
var objSpan = document.getElementById(_spanId);
var objUL= document.getElementById(_ulId);
var flag = objUL.style.display == "none";
if(flag){
objUL.style.display = "block";
objSpan.innerHTML="<b>-</b>"+_menuName;
}else{
objUL.style.display = "none";
objSpan.innerHTML="<b>+</b>"+_menuName;
}
}
/**
叶子节点信息
*/
function nodeInfo(_id,_name){
alert("节点ID:"+_id+"~节点名称:"+_name);
}
</script>
<body>
<div id="treeborder" class="treeborder">
<span class="title">菜单树</span>
<ul id="treemenu">
<li><span id="span_1" onclick="displayNext('span_1','menu_1','菜单1');"><b>+</b>菜单1</span>
<ul id="menu_1" style="display:none">
<li><span id="span_1_1" onclick="displayNext('span_1_1','menu_1_1','菜单1.1');"><b>+</b>菜单1.1</span>
<ul id="menu_1_1" style="display:none">
<li><a href="javascript:nodeInfo('menu_1_1_1','菜单1.1.1')">菜单1.1.1</a></li>
<li><a href="javascript:nodeInfo('menu_1_1_2','菜单1.1.2')">菜单1.1.2</a></li>
<li><a href="javascript:nodeInfo('menu_1_1_3','菜单1.1.3')">菜单1.1.3</a></li>
</ul>
</li>
<li><span id="span_1_2" onclick="displayNext('span_1_2','menu_1_2','菜单1.2');"><b>+</b>菜单1.2</span>
<ul id="menu_1_2" style="display:none">
<li><a href="javascript:nodeInfo('menu_1_2_1','菜单1.2.1')">菜单1.2.1</a></li>
<li><a href="javascript:nodeInfo('menu_1_2_2','菜单1.2.2')">菜单1.2.2</a></li>
<li><a href="javascript:nodeInfo('menu_1_2_3','菜单1.2.3')">菜单1.2.3</a></li>
</ul>
</li>
<li><a href="javascript:nodeInfo('menu_1_3','菜单1.3')">菜单1.3</a></li>
</ul>
</li>
<li><span id="span_2" onclick="displayNext('span_2','menu_2','菜单2');" ><b>+</b>菜单2</span>
<ul id="menu_2" style="display:none" >
<li><a href="javascript:nodeInfo('menu_2_1','菜单2.1')">菜单2.1</a></li>
<li><a href="javascript:nodeInfo('menu_2_2','菜单2.2')">菜单2.2</a></li>
<li><a href="javascript:nodeInfo('menu_2_3','菜单2.3')">菜单2.3</a></li>
</ul>
</li>
<li><span id="span_3" onclick="displayNext('span_3','menu_3','菜单3');" ><b>+</b>菜单3</span>
<ul id="menu_3" style="display:none" >
<li><a href="javascript:nodeInfo('menu_3_1','菜单3.1')">菜单3.1</a></li>
<li><a href="javascript:nodeInfo('menu_3_2','菜单3.2')">菜单3.2</a></li>
<li><a href="javascript:nodeInfo('menu_3_3','菜单3.3')">菜单3.3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>