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 相关文章推荐
jQuery创建插件的代码分析
Apr 14 Javascript
基于jQuery.Validate验证库知识点的详解
Apr 26 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
web 屏蔽BackSpace键实例代码
Dec 24 Javascript
微信小程序 设置启动页面的两种方法
Mar 09 Javascript
JQuery实现图片轮播效果
May 08 jQuery
JavaScript实现图片本地预览功能【不用上传至服务器】
Sep 20 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
Jan 25 Javascript
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
npm 常用命令详解(小结)
Jan 17 Javascript
详解在React-Native中持久化redux数据
May 22 Javascript
如何在 Vue 表单中处理图片
Jan 26 Vue.js
深入浅出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防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
php 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
Javascript 篱式条件判断
2008/08/22 Javascript
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
python基础教程之Hello World!
2014/08/29 Python
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
python logging日志模块的详解
2017/10/29 Python
python实现感知器算法详解
2017/12/19 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
python 实现视频 图像帧提取
2019/12/10 Python
Python操控mysql批量插入数据的实现方法
2020/10/27 Python
手把手教你从PyCharm安装到激活(最新激活码),亲测有效可激活至2089年
2020/11/25 Python
大学生职业生涯规划范文
2013/12/31 职场文书
运动会跳远广播稿
2014/02/04 职场文书
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
国际贸易本科毕业生求职信
2014/09/26 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
五年级上册复习计划
2015/01/19 职场文书
意向协议书
2015/01/27 职场文书
MySQL sql模式设置引起的问题
2022/05/15 MySQL
基于Python编写一个监控CPU的应用系统
2022/06/25 Python