简单折叠展开菜单

最新推荐文章于 2024-10-15 11:38:01 发布

qq_32444825

最新推荐文章于 2024-10-15 11:38:01 发布

阅读量1.8k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_32444825/article/details/80509720

版权

前端专栏收录该内容

45 篇文章 0 订阅

订阅专栏

简单折叠展开菜单

<%@ 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" οnclick="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">
    <img src="${pageContext.request.contextPath}/img/openFile.png" width="15" height="15" /><a href="#">- 子目录1</a> <br>
    <img src="${pageContext.request.contextPath}/img/openFile.png" width="15" height="15" /><a href="#">- 子目录2</a> <br>
    <img src="${pageContext.request.contextPath}/img/openFile.png" width="15" height="15" /><a href="#">- 子目录3</a> <br>
    <img src="${pageContext.request.contextPath}/img/openFile.png" width="15" height="15" /><a href="#">- 子目录4</a>
</div>
<div id="main2" style="color:blue" οnclick="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>

效果如下：