jsp树形菜单完整代码及截图
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<html>
<head>
<style>
#d1{
width:200;
height:400;
background-color:#cccccc;
border:2px solid black;
left:30;
top:30;
position:absolute;
}
#d1_head{
height:30;
background-color:blue;
color:white;
font-size:20pt;
}
#d1_body{
background-color:#cccccc;
}
.list li{list-style-type:none}
.image image:向下.png;
</style>
<script>
function doAction(index){
var obj = document.getElementById('u' + index);
if(obj.style.display == 'none'){
obj.style.display = 'block';
if(index=='1'){
document.getElementById("img1").src='向下.png';
}else{
document.getElementById("img2").src='向下.png';
}
}else{
obj.style.display = 'none';
if(index=='1'){
document.getElementById("img1").src='向右.png';
}else{
document.getElementById("img2").src='向右.png';
}
}
}
function test(){
var obj = document.getElementById('l1');
alert(obj.innerHTML);
}
</script>
</head>
<body style="font-size:20pt;">
<div id="d1">
<div id="d1_head">树形菜单</div>
<ul class="list">
<li>
<span onclick="doAction(1);"><img src="向右.png" id="img1"/>羽绒专区</span> </li>
<ul style="display:none;" id="u1">
<li><a href="#">羽绒服</a></li>
<li><a href="#">羽绒夹克</a></li>
</ul>
<li>
<span onclick="doAction(2);"><img src="向右.png" id="img2"/>靴子专区</span> </li>
<ul style="display:none;" id="u2">
<li><a href="#">雪地靴</a></li>
<li><a href="#">登山靴</a></li>
</ul>
</ul>
</div>
</div>
</body>
</html>
下载两个指向不同的小图标用于区分。