<html>
<head>
<title>New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
<!--
function cancel(){
event.cancelBubble=true
}
function toggle(obj){
var display=obj.children[0].style.display
//alert(display)
if(display=='block'){
obj.children[0].style.display='none'
}else{
obj.children[0].style.display='block'
}
}
//-->
</script>
<style type="text/css">
ul{
list-style-type:none
}
.first{
color:red
}
.style1{
color:red
}
.style2{
color:block
}
</style>
</head>
<body>
<ul>
<li onclick="toggle(this)" onMouseover="this.className='style2'" onMouseout="this.className='style1'">
第一级
<ul style="display:block">
<li onclick="cancel()">第二级
<li onclick="cancel()">第二级
</ul>
<li onclick="toggle(this)" >第一级
<ul style="display:block">
<li onclick="cancel()">第二级
<li onclick="cancel()">第二级
</ul>
</ul>
</body>
</html>
我把第一列目录变成了三级结构，代码如下：<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">
<title>无标题文档</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function menus(str,picId){
var obj, pic
// 返回 str 对象和 picId 对象是否存在
if (document.getElementById(str) &&document.getElementById(picId)){
obj=document.getElementById(str)//obj 为 DIV 对象
pic=document.getElementById(picId)//pic 为 图片对象
if (obj.style.display == "none"){ //如果DIV对象的 display 样式值为 none 的话
obj.style.display = ""//就将 display 的样式清空
pic.src = "0001.jpg"//更改图片对象的路径
}else{
obj.style.display = "none"
pic.src = "0000.jpg"
}
}
}
//-->
</script>
<style type="text/css">
<!--
.div1 {
cursor: hand
width: 100px
}
.div1_1{
cursor: hand
width: 100px
color: #666666
font-size: 14px
}
.div2 {
color: #666666
font-size: 12px
}
-->
</style>
</head>
<body>
<!--第一列的树-->
<div onClick="menus('menu1', 'pic1')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic1">语文</div>
<div id="menu1" style="display:none" class="div2">
<div onClick="menus('menu1_1', 'pic1')" class="div1_1"><img src="0000.jpg" align="absmiddle" id="pic1">文言文</div><br/>
<div id="menu1_1" style="display:none" class="div2">
文言文1
</div>
<div onClick="menus('menu1_2', 'pic1')" class="div1_1"><img src="0000.jpg" align="absmiddle" id="pic1">作文</div>
<div id="menu1_2" style="display:none" class="div2">
作文1
</div>
<div onClick="menus('menu1_3', 'pic1')" class="div1_1"><img src="0000.jpg" align="absmiddle" id="pic1">语法</div>
<div id="menu1_3" style="display:none" class="div2">
语法1
</div>
</div>
<!--第二列的树-->
<div onClick="menus('menu2', 'pic2')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic2">数学</div>
<div id="menu2" style="display:none" class="div2">
代数<br/>
几何<br/>
</div>
<!--第三列的树-->
<div onClick="menus('menu3', 'pic3')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic3">副科</div>
<div id="menu3" style="display:none" class="div2">
地理<br/>
生物<br/>
历史<br/>
</div>
<div onClick="menus('menu4', 'pic4')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic4">副科</div>
<div id="menu4" style="display:none" class="div2">
地理<br/>
生物<br/>
历史<br/>
</div>
</body>
</html>
