Javascript实现代码折叠功能
来源:易贤网 阅读:724 次 日期:2016-08-30 14:14:24
温馨提示:易贤网小编为您整理了“Javascript实现代码折叠功能”,方便广大网友查阅!

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

总结

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

更多信息请查看网络编程
易贤网手机网站地址:Javascript实现代码折叠功能
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标