网上载了个树型菜单代码 有很多困惑 望大哥哥们指教
源码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> </title>
<style type="text/css">
body { font-size: 12px; }
* { margin:0; padding:0; }
#nav div{ cursor: pointer; background:#FFFF00; border-bottom: dashed 1px #ccc; padding:5px 5px 5px 10px; display:block; width:160px;}
#nav ul{list-style: inside circle; display:none; font: 12px/130% Tahoma; margin-left:2em;}
#nav li{padding:2px; margin-bottom:3px; border-bottom:solid 1px #eee;}
#nav li a{ color:#f20; text-decoration:none;}
</style>
</head>
<body>
<div id="nav">
<div >系统信息公告
<ul style="background-color:#00FF00">
<li><a href="">留言列表</a></li>
<li><a href="">发布留言</a></li>
<li><a href="">查看留言</a></li>
</ul>
</div>
<div style="background-color:#FF00FF">用户管理
<ul style="background-color:#FFFFFF">
<li><a href="">添加用户</a></li>
<li><a href="">更改密码</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
var cao=document.getElementById("nav");
var dd = cao.childNodes;
for(var i=0;i<dd.length;i++){
dd[i].lancer=i; //--1
dd[i].childNodes[1].onclick=function nono(){window.event.cancelBubble = true;}
dd[i].onclick=function shut_open(){var i=this.lancer; //--2
dd[i].childNodes[1].style.display = (dd[i].childNodes[1].style.display == "block")?"":"block";} //--3
}
</script>
</body>
</html>
困惑:
1.#nav这个选择符没有声明和定义样式属性,这是CSS的什么用法? 这个选择符是不是相当于在代码中定义了 #nav { }?
2.我把 //--1 处的 dd[i].lancer=i; //--2 处的 var i=this.lancer; 去掉.想直接令shut_open()中dd[i]的i值即为for(...)中i的值,然后以此取得div对象.但结果行不通,不知为何?
3.//--3处的""我认为应该是"none",但""和"none"都行得通,晕!
望高手指点迷津,不胜感激!
问题点数：100、回复次数：4Top
1 楼leohuang（LEO）回复于 2006-08-04 09:29:13 得分 60
以下为我的拙见
1.#nav是把定以nav为id的对象的样式
２、dd[i].lancer=i是为nav中两个层做个标记，以便在点击的时候知道当前点的是哪一个
var i=this.lancer是点击之后取原来赋给这个层的值，也就是他在nav层中childNodes的编号
3、因为在这个样式里#nav ul{list-style: inside circle; display:none; font: 12px/130% Tahoma; margin-left:2em;}
已经将该ul标记为display=none,所有设为block时会显示出来，再置空时就又使用样式中的值，即display:none，所有就达到显示和隐藏的效果Top
2 楼theforever（碧海情天）回复于 2006-08-04 10:11:00 得分 20
1.
#nav div{……}
#nav ul{……}
这些是对nav里面的元素进行设置,
<div id="nav"> ／／注意这个Top
3 楼theforever（碧海情天）回复于 2006-08-04 10:21:01 得分 20
试用了一下,虽然简单,但很精简。适当加些修饰,效果也不错。Top
4 楼hongqiaowei（）回复于 2006-08-05 00:59:15 得分 0
再等一天，希望有贵人能给个肯定的答案，然后结帐！Top
