Javascript实现代码折叠功能
2016-08-30来源:

代码折叠起来,使整段程序缩成一行,看起来清爽了许多。大家在使用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 = '//www.submisscin.com/wap/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="//www.submisscin.com/wap/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>

总结

以上就是本文的全部内容,希望对有需要的人能有所帮助。

推荐信息
Baidu
map