Javascript实现代码折叠功能
2019/6/27 22:11:08
本文主要是介绍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实现代码折叠功能的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist
- 2024-03-11icons for vue
- 2024-03-07breadcrumbs react js
- 2024-03-06react login page example
- 2024-03-06react router uselocation
- 2024-03-04postgres jsonb_set
- 2024-03-01react native uuid
- 2024-02-29vuejs sidebar