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中的其他对象
Jan 16 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
Dec 25 Javascript
jquery ajax return没有返回值的解决方法
Oct 20 Javascript
select标签模拟/美化方法采用JS外挂式插件
Apr 01 Javascript
javascript标签在页面中的位置探讨
Apr 11 Javascript
JS获取节点的兄弟,父级,子级元素的方法
Jan 09 Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
javascript html5实现表单验证
Mar 01 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
JavaScript私有变量实例详解
Jan 24 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设计模式之迭代器模式的深入解析
2013/06/13 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
cloudgamer出品ImageZoom 图片放大效果
2010/04/01 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
React中this丢失的四种解决方法
2019/03/12 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
python简单文本处理的方法
2015/07/10 Python
python中map()与zip()操作方法
2016/02/27 Python
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
Python 实现链表实例代码
2017/04/07 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
python使用PIL模块获取图片像素点的方法
2019/01/08 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
python解释器安装教程的方法步骤
2020/07/02 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
C#基础面试题
2016/10/17 面试题
给海归自荐信的建议
2013/12/13 职场文书
大学系主任推荐信范文
2013/12/24 职场文书
男女朋友协议书
2014/04/23 职场文书
品牌转让协议书
2014/08/20 职场文书
铁路安全反思材料
2014/12/24 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书