快捷導(dǎo)航

Javascript實(shí)現(xiàn)代碼折疊功能

更新時(shí)間：2016年08月25日 16:01:47 投稿：daisy

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

一、首先定義一個(gè)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)頁上定義一個(gè)div和一個(gè)ul，注意div中要包含一個(gè)id為level開頭的image和一個(gè)onclick事件，ul中id要包含row，默認(rèn)情況下是展開的，如果需要默認(rèn)為閉合，則要在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>

總結(jié)

以上就是本文的全部?jī)?nèi)容，希望對(duì)有需要的人能有所幫助。如果有疑問可以留言討論。

您可能感興趣的文章:

相關(guān)文章

解決LayUI數(shù)據(jù)表格復(fù)選框不居中顯示的問題
今天小編就為大家分享一篇解決LayUI數(shù)據(jù)表格復(fù)選框不居中顯示的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
JavaScript中關(guān)鍵字?var、let、const的區(qū)別詳解
在JavaScript中,var、let和const是用于聲明變量的關(guān)鍵字,它們之間存在一些區(qū)別,這篇文章就給大家詳細(xì)介紹一下它們之間的區(qū)別,文章通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
2023-08-08
JavaScript中的property和attribute介紹
JavaScript中的property和attribute介紹，需要的朋友可以參考下。
2011-12-12
javascript實(shí)現(xiàn)點(diǎn)擊提交按鈕后顯示loading的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)點(diǎn)擊提交按鈕后顯示loading的方法,涉及javascript動(dòng)態(tài)設(shè)置頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下
2015-07-07
js querySelector和getElementById通過id獲取元素的區(qū)別
這是sina同事xiaoniu發(fā)現(xiàn)的，querySelector和getElementById通過id獲取元素的區(qū)別
2012-04-04
javascript面向?qū)ο笾R(shí)很廣泛，想深入理解需要花費(fèi)一些時(shí)間，本文給大家介紹了js面向?qū)ο蟮膭?chuàng)建及相關(guān)屬性介紹，感興趣的小伙伴一起學(xué)習(xí)吧
2017-05-05