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 Date函数整理方便使用
Oct 23 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
Dec 30 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 Javascript
深入理解JavaScript中的for循环
Feb 07 Javascript
JavaScript阻止表单提交方法(附代码)
Aug 15 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
Dec 24 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 Javascript
JQuery特殊效果和链式调用操作示例
May 13 jQuery
vue3中的组件间通信
Mar 31 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设计模式 Adapter(适配器模式)
2011/06/26 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
javascript编程起步(第六课)
2007/02/27 Javascript
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
动态样式类封装JS代码
2009/09/02 Javascript
图像替换新技术 状态域方法
2010/01/28 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
Python Web开发模板引擎优缺点总结
2014/05/06 Python
python类和函数中使用静态变量的方法
2015/05/09 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
python 为什么说eval要慎用
2019/03/26 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
python 提取文件指定列的方法示例
2019/08/07 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
pytorch中交叉熵损失(nn.CrossEntropyLoss())的计算过程详解
2020/01/02 Python
如何基于Python按行合并两个txt
2020/11/03 Python
python request 模块详细介绍
2020/11/10 Python
如何使用css3实现一个类在线直播的队列动画的示例代码
2020/06/17 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
Shell编程面试题
2016/05/29 面试题
军校本科大学生自我评价
2014/01/14 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
党支部综合考察材料
2014/05/19 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
使用python创建股票的时间序列可视化分析
2022/03/03 Python