本文作者:35博客

可折叠展开的简单目录实现代码

35博客 1个月前 ( 09-03 ) 389 1条评论

简单的目录,展开菜单,鼠标点击即可展开,再次点击即可合拢,类似树形菜单的功能,在浏览网页时会见很多,不多做介绍了,需要的朋友可以参考下

<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'" > 
+ 主目录1</div> 
<div id="child1" style="display:none"> 
<a href="#">- 子目录1</a> <br> 
<a href="#">- 子目录2</a> <br> 
<a href="#">- 子目录3</a> <br> 
<a href="#">- 子目录4</a> 
</div> 
<div id="main2" style="color:blue" onclick="document.all.child2.style.display=(document.all.child2.style.display =='none')?'':'none'" > 
+ 主目录2 </div> 
<div id="child2" style="display:none"> 
<a href="#">- 子目录1</a> <br> 
<a href="#">- 子目录2</a> <br> 
<a href="#">- 子目录3</a> 
</div>

效果展示:(请用手机查看)https://www.35boke.com/category-20.html 

文章版权及转载声明:

作者:35博客本文地址:https://www.35boke.com/post/161.html发布于 1个月前 ( 09-03 )
文章转载或复制请以超链接形式并注明出处35博客

分享到:
赞(1

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

发表评论

快捷回复:

验证码

评论列表 (有 1 条评论,389人围观)参与讨论
网友昵称:8855579
8855579 游客2019-09-04沙发 回复 MIUI Browser 10.8.1 Huawei HLK-AL00
[U][/U]