简单折叠展开菜单

简单折叠展开菜单

<%@ page contentType="text/html; charset=utf-8"%>

<title>可折叠展开的简单目录</title>
<style>div{font-size:12px;color:red; background-color: #EAEAE8; border: 1 solid #1892B5; padding: 1}
</style>


<div id="main1" style="color:blue" onclick="document.all.child1.style.display=(document.all.child1.style.display =='none')?'':'none'" > 
+ <img src="${pageContext.request.contextPath}/img/file.png" width="15" height="15"  />主目录
</div> 
<div id="child1" style="display:none"> 
&nbsp;&nbsp;&nbsp; <img src="${pageContext.request.contextPath}/img/openFile.png" width="15" height="15"  /><a href="#">- 子目录1</a> <br> 
&nbsp;&nbsp;&nbsp; <img src="${pageContext.request.contextPath}/img/openFile.png" width="15" height="15"  /><a href="#">- 子目录2</a> <br> 
&nbsp;&nbsp;&nbsp; <img src="${pageContext.request.contextPath}/img/openFile.png" width="15" height="15"  /><a href="#">- 子目录3</a> <br> 
&nbsp;&nbsp;&nbsp; <img src="${pageContext.request.contextPath}/img/openFile.png" width="15" height="15"  /><a href="#">- 子目录4</a> 
</div> 
<div id="main2" style="color:blue" onclick="document.all.child2.style.display=(document.all.child2.style.display =='none')?'':'none'" > 
+ <img src="${pageContext.request.contextPath}/img/file.png" width="15" height="15"  />
主目录</div> 
<div id="child2" style="display:none"> 
<a href="#">- 子目录1</a> <br> 
<a href="#">- 子目录2</a> <br> 
<a href="#">- 子目录3</a> 

</div>

效果如下：