Javascript实现代码折叠功能


Posted in Javascript onAugust 25, 2016

一、首先定义一个JavaScript function,如下:

function puckerMenu(level) {
var levelLength = ('row' + level).length;
var toDo = '0';
for (var iCount = 0 ; iCount < document.all.length; iCount++){
if ( document.all[iCount].id.indexOf('row' + level) > -1 && ( document.all[iCount].id.length > levelLength)) {
if ( document.all('level' + level).src.indexOf('minus.gif') > -1 ) {
document.all[iCount].style.display = 'none';
toDo = '1';
} else {
document.all[iCount].style.display = 'block';
toDo = '0';
}
}
 }
if ( toDo == '1' ) {
document.all('level' + level).src = 'images/plus.gif';
 } else {
document.all('level' + level).src = 'images/minus.gif';
 }
}

二、然后在网页上定义一个div和一个ul,注意div中要包含一个idlevel开头的image和一个onclick事件,ulid要包含row,默认情况下是展开的,如果需要默认为闭合,则要在ul中加入style="display:none"

例子如下:

<body>
<divstyle="CURSOR: hand"
onclick="puckerMenu('1');"><IMGid=level1
src="images/minus.gif">public class DataAccess</div>
<ulid=row1>
<li> private string connString;
<divstyle="CURSOR: hand"
onclick="puckerMenu('2');"><IMGid=level2
src="images /plus.gif">protected DbConnection OpenConnection()</div>
<ulid=row2style="display:none">{...}</ul>
<li>
Other
</ul>
</body>

总结

以上就是本文的全部内容,希望对有需要的人能有所帮助。如果有疑问可以留言讨论。

Javascript 相关文章推荐
一段非常简单的让图片自动切换js代码
Nov 10 Javascript
js静态作用域的功能。
Dec 25 Javascript
Javascript 实现复制(Copy)动作方法大全
Jun 20 Javascript
使用JS+plupload直接批量上传图片到又拍云
Dec 01 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
Oct 10 Javascript
jquery实现全选、反选、获得所有选中的checkbox
Sep 13 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
Apr 20 Javascript
js实现倒计时关键代码
May 05 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 Javascript
深入浅出ES6之let和const命令
Aug 25 #Javascript
PhotoSwipe异步动态加载图片方法
Aug 25 #Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 #Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
Aug 25 #Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 #Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
Aug 25 #Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 #Javascript
You might like
php5 and xml示例
2006/11/22 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
php购物车实现方法
2015/01/03 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
php ajax数据传输和响应方法
2018/08/21 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
2007/01/22 Javascript
Javascript 构造函数 实例分析
2008/11/26 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
2016/01/04 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
JavaScript实现单图片上传并预览功能
2019/09/30 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
python文件比较示例分享
2014/01/10 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
python微信撤回监测代码
2019/04/29 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
学徒工职责
2014/03/06 职场文书
主管竞聘书范文
2014/03/31 职场文书
干部竞争上岗演讲稿
2014/09/11 职场文书
职代会闭幕词
2015/01/28 职场文书
python实现层次聚类的方法
2021/11/01 Python
利用uni-app生成微信小程序的踩坑记录
2022/04/05 Javascript
box-shadow单边阴影的实现
2023/05/21 HTML / CSS