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 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
fix-ie5.js扩展在IE5下不能使用的几个方法
Aug 20 Javascript
Jquery为单选框checkbox绑定单击click事件
Dec 18 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
JS加载iFrame出现空白问题的解决办法
May 13 Javascript
高效Web开发的10个jQuery代码片段
Jul 22 Javascript
用js写的一个路由(简单实例)
Sep 24 Javascript
Node.js学习之查询字符串解析querystring详解
Sep 28 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
Nov 17 Javascript
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
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连mysql和oracle数据库性能比较
2006/10/09 PHP
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
php 获取文件行数的方法总结
2016/10/11 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
自己编写的类似JS的trim方法
2013/10/09 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
Vue加载组件、动态加载组件的几种方式
2018/08/31 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
python使用PyGame模块播放声音的方法
2015/05/20 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
Django ImageFiled上传照片并显示的方法
2019/07/28 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
在什么时候需要使用"常引用"
2015/12/31 面试题
大客户销售经理职责
2013/12/04 职场文书
内容编辑个人求职信
2013/12/10 职场文书
入党自我鉴定
2014/03/25 职场文书
客运企业隐患排查工作方案
2014/06/06 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
2014年合同管理工作总结
2014/12/02 职场文书
承诺函格式模板
2015/01/21 职场文书
2016年入党心得体会范文
2016/01/23 职场文书