Javascript實現(xiàn)代碼折疊功能
來源:易賢網(wǎng) 閱讀:1390 次 日期:2016-08-30 14:14:24
溫馨提示:易賢網(wǎng)小編為您整理了“Javascript實現(xiàn)代碼折疊功能”,方便廣大網(wǎng)友查閱!

代碼折疊起來,使整段程序縮成一行,看起來清爽了許多。大家在使用Visual Studio環(huán)境進行開發(fā)時,可以把某個類或某個函數(shù)折疊起來,在很多網(wǎng)頁上也有類似的功能,那到底是如何實現(xiàn)的呢?其實很簡單,只要通過JavaScript就可以實現(xiàn)。

一、首先定義一個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';

 }

}

二、然后在網(wǎng)頁上定義一個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>

總結

以上就是本文的全部內容,希望對有需要的人能有所幫助。

更多信息請查看網(wǎng)絡編程
易賢網(wǎng)手機網(wǎng)站地址:Javascript實現(xiàn)代碼折疊功能
關于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點

版權所有:易賢網(wǎng)