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 相关文章推荐
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
Jun 28 Javascript
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
JS性能优化笔记搜索整理
Aug 21 Javascript
浅谈javascript属性onresize
Apr 20 Javascript
javascript实现链接单选效果的方法
May 13 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
AngularJS控制器继承自另一控制器
May 09 Javascript
Bootstrap栅格系统简单实现代码
Mar 06 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
深入浅出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
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
Three.js学习之网格
2016/08/10 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
js 获取今天以及过去日期
2017/04/11 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
js+canvas实现转盘效果(两个版本)
2020/09/13 Javascript
python实现linux下抓包并存库功能
2018/07/18 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
Python文件路径名的操作方法
2019/10/30 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
魅力教师事迹材料
2014/01/10 职场文书
保险公司晨会主持词
2014/03/22 职场文书
本科生求职信
2014/06/17 职场文书
企业委托书范本
2014/09/13 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
mysql优化
2021/04/06 MySQL
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript