js实现超简单的展开、折叠目录代码


Posted in Javascript onAugust 28, 2015

本文实例讲述了js实现超简单的展开、折叠目录代码。分享给大家供大家参考。具体如下:

这里介绍一款超简单的目录,展开菜单代码,鼠标点击即可展开,再次点击即可合拢,类似树形菜单的功能,网上见过很多,不多做介绍了,欢迎参考。

运行效果截图如下:

js实现超简单的展开、折叠目录代码

在线演示地址如下:

具体代码如下:

<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>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JQuery打造PHP的AJAX表单提交实例
Nov 03 Javascript
基于jquery自己写tab滑动门(通用版)
Oct 30 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
Dec 21 Javascript
js实现文本框选中的方法
May 26 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
用js读写cookie的简单方法(推荐)
Aug 08 Javascript
JavaScript中关键字 in 的使用方法详解
Oct 17 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 Javascript
vue实现移动端input上传视频、音频
Aug 18 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
Nov 02 Javascript
JavaScript canvas实现文字时钟
Jan 10 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 #Javascript
jquery实现超简洁的TAB选项卡效果代码
Aug 28 #Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 #Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 #Javascript
Angular Js文件上传之form-data
Aug 28 #Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
Aug 28 #Javascript
jquery实现未经美化的简洁TAB菜单效果
Aug 28 #Javascript
You might like
解析curl提交GET,POST,Cookie的简单方法
2013/06/29 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
php ZipArchive实现多文件打包下载实例
2019/10/31 PHP
js停止输出代码
2008/07/20 Javascript
jQuery 名称冲突的解决方法
2011/04/08 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
2014/07/09 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
Python中的异常处理简明介绍
2015/04/13 Python
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
批处理与python代码混合编程的方法
2016/05/19 Python
python 链接和操作 memcache方法
2017/03/04 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
详解PANDAS 数据合并与重塑(join/merge篇)
2019/07/09 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
大学生求职简历的自我评价
2013/10/14 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技