当前位置：首页 > 资讯 > 技术文档

Javascript实现代码折叠功能

时间：2022-04-19 03:15 编辑：来源：阅读：
扫一扫，手机访问

摘要：Javascript实现代码折叠功能

一、首先定义一个JavaScript [code]function[/code]，如下：

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';
 }
}

二、然后在网页上定义一个[code]div[/code]和一个[code]ul[/code]，注意[code]div[/code]中要包含一个[code]id[/code]为[code]level[/code]开头的[code]image[/code]和一个[code]onclick[/code]事件，[code]ul[/code]中[code]id[/code]要包含[code]row[/code]，默认情况下是展开的，如果需要默认为闭合，则要在[code]ul[/code]中加入[code]style="display:none" [/code] [b]例子如下：[/b]

<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>

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

全部评论(0)

上一篇：JavaScript用二分法查找数据的实例代码
下一篇：浅析JS动态创建元素【两种方法】

资讯排行榜
更多>>