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 相关文章推荐
JavaScript 常见对象类创建代码与优缺点分析
Dec 07 Javascript
javascript offsetX与layerX区别
Mar 12 Javascript
判断对象是否Window的实现代码
Jan 10 Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
js使用ajax读博客rss示例
May 06 Javascript
javascript中CheckBox全选终极方案
May 20 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
推荐10款扩展Web表单的JS插件
Dec 25 Javascript
Vuex实现计数器以及列表展示效果
Mar 10 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
vue 使用外部JS与调用原生API操作示例
Dec 02 Javascript
详解JavaScript的this指向和绑定
Sep 08 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
使用php来实现网络服务
2009/09/15 PHP
PHP扩展CURL的用法详解
2014/06/20 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
js实现表格字段排序
2014/02/19 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
JavaScript实现简单生成随机颜色的方法
2017/09/21 Javascript
javascript与PHP动态往类中添加方法对比
2018/03/21 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
Python实现简单的语音识别系统
2017/12/13 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
什么叫做SQL注入,如何防止
2016/10/04 面试题
珍珠奶茶店创业计划书
2014/01/11 职场文书
调解员先进事迹材料
2014/02/07 职场文书
企业标语大全
2014/07/01 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
检讨书范文500字
2015/01/28 职场文书
重阳节慰问信
2015/02/15 职场文书
财务部岗位职责范本
2015/04/14 职场文书
培训讲师开场白
2015/06/01 职场文书
组织委员竞选稿
2015/11/21 职场文书
《月光曲》教学反思
2016/02/16 职场文书
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript
SpringBoot前端后端分离之Nginx服务器下载安装过程
2022/08/14 Servers