老裴帮助关于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"? 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>
