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>

总结

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

您可能感兴趣的文章:

  • js实现选项卡内容切换以及折叠和展开效果【推荐】
  • js无限级折叠菜单精简版
  • JSON无限折叠菜单编写实例
  • js 全兼容可高亮二级缓冲折叠菜单
  • 原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
  • js实现简单折叠、展开菜单的方法
  • javascript仿qq界面的折叠菜单实现代码
  • Js操作树节点自动折叠展开的几种方法
  • JS+CSS实现的简单折叠展开多级菜单效果
  • jquery实现折叠菜单效果【推荐】