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编程起步(第二课)
Feb 27 Javascript
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
关于jQuery object and DOM element
Apr 15 Javascript
jQuery动画与特效详解
Feb 01 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
解决vue单页面应用中动态修改title问题
Jun 09 Javascript
react基本安装与测试示例
Apr 27 Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
Oct 30 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
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
Javascript中的String对象详谈
2014/03/03 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
2016/08/25 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
快速搭建React的环境步骤详解
2017/11/06 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
VUE中使用HTTP库Axios方法详解
2020/02/05 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
Python中的index()方法使用教程
2015/05/18 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
python实现聊天小程序
2018/03/13 Python
学生信息管理系统python版
2018/10/17 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
请解释流与文件有什么不同
2016/07/29 面试题
英语演讲稿范文
2014/01/03 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
创业女性典型材料
2014/05/02 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
大学生见习报告范文
2014/11/03 职场文书
学校计划生育责任书
2015/05/09 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
Java Socket实现多人聊天系统
2021/07/15 Java/Android
python flappy bird小游戏分步实现流程
2022/02/15 Python