Javascript实现代码折叠功能

前端技术 2023/09/04 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>

总结

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

本文地址：https://www.stayed.cn/item/10313

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案