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中的数学函数集合
May 08 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 Javascript
js数组去重的方法汇总
Jul 29 Javascript
node.js + socket.io 实现点对点随机匹配聊天
Jun 30 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
小程序click-scroll组件设计
Jun 18 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
Jul 19 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 Javascript
JavaScript实现模态对话框实例
Jan 13 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
May 24 Javascript
JavaScript实现矩形块大小任意缩放
Aug 25 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执行linux系统命令的常用函数使用说明
2010/04/27 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
jQuery实现简单隔行变色的方法
2016/02/20 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
2019/06/18 Javascript
全面解析js中的原型,原型对象,原型链
2021/01/25 Javascript
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
python模拟鼠标拖动操作的方法
2015/03/11 Python
Python爬虫框架Scrapy实战之批量抓取招聘信息
2015/08/07 Python
python使用psutil模块获取系统状态
2016/08/27 Python
python版微信跳一跳游戏辅助
2018/01/11 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
Django组件cookie与session的具体使用
2019/06/05 Python
python实现取余操作的简单实例
2020/08/16 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
印度网上药店:1mg
2017/10/13 全球购物
美国滑雪和滑雪板商店:Buckman
2018/03/03 全球购物
Abbott Lyon官网:女士手表、珠宝及配件
2020/12/26 全球购物
党日活动总结
2014/05/07 职场文书
优秀班组长事迹
2014/05/31 职场文书
保卫工作个人总结
2015/03/03 职场文书
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python