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 Tips(2) 关于$()包装集你不知道的
Dec 14 Javascript
jQuery构造函数init参数分析
May 13 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
jquery实现二级导航下拉菜单效果
Dec 18 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 Javascript
node.js的http.createServer过程深入解析
Jun 06 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 Javascript
vue2的 router在使用过程中遇到的一些问题
Apr 13 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中isset()和unset()函数的用法小结
2014/03/11 PHP
php猴子选大王问题解决方法
2015/05/12 PHP
php使用Imagick生成图片的方法
2015/07/31 PHP
php5与php7的区别点总结
2019/10/11 PHP
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
js实现div闪烁原理及实现代码
2014/06/24 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
vue强制刷新组件的方法示例
2019/02/28 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
nodejs log4js 使用详解
2019/05/31 NodeJs
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
使用C++扩展Python的功能详解
2018/01/12 Python
解决Django migrate不能发现app.models的表问题
2019/08/31 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
浅谈css3中的前缀
2016/07/20 HTML / CSS
天网面试题
2013/04/07 面试题
一份软件工程师的面试试题
2016/02/01 面试题
《值日生》教学反思
2014/02/17 职场文书
中学生励志演讲稿
2014/04/26 职场文书
小学英语教师先进事迹
2014/05/28 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
2014年项目工作总结
2014/11/24 职场文书
公司2014年度工作总结
2014/12/10 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
八年级作文之我的母亲
2019/12/10 职场文书
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server