Javascript实现代码折叠功能_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中要包含一个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>

总结

以上就是本文的全部内容,希望对有需要的人能有所帮助。如果有疑问可以留言讨论。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索vs2015
, vs2010
, js代码折叠
js折叠代码
javascript 折叠、javascript 代码折叠、javascript折叠菜单、javascript技巧、javascript实现计算器,以便于您获取更多的相关知识。

时间: 2024-12-03 09:09:00

Javascript实现代码折叠功能_javascript技巧的相关文章

JavaScript面向对象编写购物车功能_javascript技巧

之前的项目中需要一个购买数据商品并付款的功能,刚开始一直不敢使用面向对象的写法,主要是没有理清思路,而且那时的数据商品比较的复杂,就一直没敢动,在网上也找些面向对象的写法,把思路理清一遍,就想自己试着写写.  接下来我会一步一步分析,面向对象的写法过程.整个流程大致分为:                1.先定义好一个商品列表的数据形式和商品总数集,类似:  var data = [{name: 'name', unitPrice: 10, num: 2}]; var total = {type

javascript常用代码段搜集_javascript技巧

1.json转字符串 复制代码 代码如下: function json2str(o) {     var arr = [];     var fmt = function (s) {         if (typeof s == 'object' && s != null) return json2str(s);         return /^(string|number)$/.test(typeof s) ? "'" + s + "'" :

javascript如何实现暂停功能_javascript技巧

本文实例讲述了JS实现的自定义网页拖动类.分享给大家供大家参考,具体如下: Javascript本身没有暂停功能(sleep不能使用)同时 vbscript也不能使用doEvents,故编写此函数实现此功能. javascript作为弱对象语言,一个函数也可以作为一个对象使用. 比如: function Test(){ alert("hellow"); this.NextStep=function(){ alert("NextStep"); } } 我们可以这样调用

javascript实现五星评分功能_javascript技巧

本文为大家分享了javascript实现五星评分功能的实例代码,大家可以参考学习一下,具体的实现办法如下 在分享javascript实现五星评价功能的实例代码之前,先看一看效果图: star1.png         star1.png   具体代码:  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>53</

为JavaScript类型增加方法的实现代码(增加功能)_javascript技巧

javaScript的类型函数(如Number/String/Boolean/Array/Date/Obejct等)都是继承于 Function.prototype,所以给Function.prototype增加方法,同时也会影响到由它衍生的下层类型函数.如: 复制代码 代码如下: Function.prototype.addMethod=function(methodName,func){ if(!this[methodName]){ this[methodName]=func;//给类型增加

深入剖析JavaScript中的枚举功能_javascript技巧

由于 Microsoft AJAX Library 对于 JavaScript 进行了大幅扩展, 枚举这个常用的功能当然也被加进去了, 本次就是来探讨 JavaScript 的枚举功能. 由于范例很简单, 所以直接看 HTML 标签就 OK 了 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">     <title></t

JavaScript实现网页截图功能_javascript技巧

使用JavaScript截图,这里我要推荐两款开源组件:一个是Canvas2Image,它可以将Canvas绘图编程PNG/JPEG/BMP的图像:但是光有它还不够,我们需要给任意DOM(至少是绝大部分)截图,这就需要html2canvas,它可以将DOM对象转换成一个canvas对象.两者的功能结合起来,就可以把页面上的DOM截图成PNG或者JPEG图像了,很酷. Canvas2Image 它的原理是利用了HTML5的canvas对象提供了toDataURL()的API: 复制代码 代码如下:

eclipse xml 代码折叠-eclipse xml如何开启代码折叠功能?

问题描述 eclipse xml如何开启代码折叠功能? 已经设置了enable folding,还是不能折叠... 解决方案 出处:http://blog.csdn.net/kepoon/article/details/5842182 java开发环境eclipse的使用(模块代码折叠.可视化开发插件.生成Jar插件) 分类: [工具.配置] 2010-08-26 23:51 7404人阅读 评论(0) 收藏 举报 eclipsejavaswtlibraryjarclass 1.模块化代码折叠

javascript框架设计之框架分类及主要功能_javascript技巧

从内部架构和理念划分,目前JavaScript框架可以划分为5类. 第一种是以命名空间为导向的类库或框架,如果创建一个数组用new Array(),生成一个对象用new Object(),完全的java风格,因此,我们以某一对象为跟,不断为它添加对象和二级对象属性来组织代码,如金字塔般垒起来,早期代表YUI,EXT(so,不是有活力的公司都还用它们) 第二种是以类工厂为导向的框架.著名的有Prototype,还有mootools.Base2.Ten,它们基本上除了最基本的命名空间,其它模块都是一