脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Javascript实现代码折叠

Javascript实现代码折叠功能

 更新时间：2016年08月25日 16:01:47   投稿：daisy  
代码折叠起来,使整段程序缩成一行,看起来清爽了许多。大家在使用Visual Studio环境进行开发时，可以把某个类或某个函数折叠起来，在很多网页上也有类似的功能，那到底是如何实现的呢？其实很简单，只要通过JavaScript就可以实现。

一、首先定义一个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中要包含一个id为level开头的image和一个onclick事件，ul中id要包含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设计模式之单例模式

    这篇文章主要为大家介绍了JavaScript设计模式中的单例模式，对JavaScript设计模式感兴趣的小伙伴们可以参考一下
    2016-01-01
  • wavesurfer.js绘制音频波形图的实现

    wavesurfer.js绘制音频波形图的实现

    这篇文章主要介绍了wavesurfer.js绘制音频波形图的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • JavaScript图片懒加载的优化方法详解

    JavaScript图片懒加载的优化方法详解

    这篇文章主要为大家详细介绍了JavaScript图片懒加载的优化方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-03-03
  • JavaScript OOP类与继承

    JavaScript OOP类与继承

    JavaScript OOP类与继承实现代码，需要的朋友可以参考下。
    2009-11-11
  • layer实现弹出层自动调节位置

    layer实现弹出层自动调节位置

    今天小编就为大家分享一篇layer实现弹出层自动调节位置，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript工具库jscpd检测前端代码重复度

    JavaScript工具库jscpd检测前端代码重复度

    在前端开发中,代码的重复度是一个常见的问题,重复的代码不仅增加了代码的维护成本,还可能导致程序的低效运行,为了解决这个问题,有许多工具和技术被用来检测和消除代码重复,其中一个被广泛使用的工具就是jscpd
    2023-10-10
  • 理清apply(),call()的区别和关系

    理清apply(),call()的区别和关系

    如果没接触过动态语言,以编译型语言的思维方式去理解javaScript将会有种神奇而怪异的感觉,因为意识上往往不可能的事偏偏就发生了,甚至觉得不可理喻.
    2011-08-08
  • 微信小程序学习总结（二）样式、属性、模板操作分析

    微信小程序学习总结（二）样式、属性、模板操作分析

    这篇文章主要介绍了微信小程序样式、属性、模板操作,结合实例形式分析了微信小程序尺寸单位、样式、数据初始化、属性、模板调用相关操作技巧,需要的朋友可以参考下
    2020-06-06
  • javascript关于open.window子页面执行完成后刷新父页面的问题分析

    javascript关于open.window子页面执行完成后刷新父页面的问题分析

    这篇文章主要介绍了javascript关于open.window子页面执行完成后刷新父页面的问题,实例分析了javascript操作子页面的执行与父页面的刷新技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • 详细解析let和const命令

    详细解析let和const命令

    这篇文章主要介绍了详细解析let和const命令，let和const是es6中新增的命令，一般let用来声明变量而const则用来声明常量，更多相关内容感兴趣的小伙伴可以参考一下
    2022-06-06

最新评论