JS实现代码折叠功能
2014-11-02 20:41 484 0
大家在使用Visual Studio环境进行开发时，可以把某个类或某个函数折叠起来，在很多网页上也有类似的功能，像cnblogs中的代码段，那到底是如何实现的呢？其实很简单，只要通过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>
