简要咨询咨询QQ网站导航网站搜索手机站点联系我们设为首页加入收藏 

Javascript实现代码折叠功能

来源:易贤网   阅读:1084 次  日期: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>

总结

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

更多信息请查看网络编程
点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】     【点此处查询各地各类考试咨询QQ号码及交流群
上一篇:轻松掌握JavaScript策略模式
下一篇:jQuery组件easyui对话框实现代码
易贤网手机网站地址:Javascript实现代码折叠功能
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!