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 相关文章推荐
js 数组实现一个类似ruby的迭代器
Oct 27 Javascript
解析javascript 浏览器关闭事件
Jul 08 Javascript
javascript中验证大写字母、数字和中文
Jan 15 Javascript
Eclipse配置Javascript开发环境图文教程
Jan 29 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 Javascript
Javascript如何判断数据类型和数组类型
Jun 22 Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
vue实现同一个页面可以有多个router-view的方法
Sep 20 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 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
实现了一个PHP5的getter/setter基类的代码
2007/02/25 PHP
php对数组排序的简单实例
2013/12/25 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
PHP计算近1年的所有月份
2017/03/13 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
JavaScript 私有成员分析
2009/01/13 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python检测是文件还是目录的方法
2015/07/03 Python
python实现各进制转换的总结大全
2017/06/18 Python
在java中如何定义一个抽象属性示例详解
2017/08/18 Python
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
Python实现抓取HTML网页并以PDF文件形式保存的方法
2018/05/08 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
Python多线程通信queue队列用法实例分析
2020/03/24 Python
python怎么删除缓存文件
2020/07/19 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
学生党支部先进事迹
2014/02/04 职场文书
经销商订货会主持词
2014/03/27 职场文书
幼儿园运动会口号
2014/06/07 职场文书
道德模范事迹材料
2014/12/20 职场文书
2015年六一儿童节演讲稿
2015/03/19 职场文书
雷锋的观后感
2015/06/10 职场文书
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS
SQL 聚合、分组和排序
2021/11/11 MySQL