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ì)有需要的人能有所幫助。如果有疑問可以留言討論。
- js實(shí)現(xiàn)選項(xiàng)卡內(nèi)容切換以及折疊和展開效果【推薦】
- js無限級(jí)折疊菜單精簡(jiǎn)版
- JSON無限折疊菜單編寫實(shí)例
- js 全兼容可高亮二級(jí)緩沖折疊菜單
- 原生Js與jquery的多組處理, 僅展開一個(gè)區(qū)塊的折疊效果
- js實(shí)現(xiàn)簡(jiǎn)單折疊、展開菜單的方法
- javascript仿qq界面的折疊菜單實(shí)現(xiàn)代碼
- Js操作樹節(jié)點(diǎn)自動(dòng)折疊展開的幾種方法
- JS+CSS實(shí)現(xiàn)的簡(jiǎn)單折疊展開多級(jí)菜單效果
- jquery實(shí)現(xiàn)折疊菜單效果【推薦】
相關(guān)文章
bootstrap模態(tài)框關(guān)閉后清除模態(tài)框的數(shù)據(jù)方法
今天小編就為大家分享一篇bootstrap模態(tài)框關(guān)閉后清除模態(tài)框的數(shù)據(jù)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
利用hasOwnProperty給數(shù)組去重的面試題分享
obj.hasOwnProperty(attr) 判斷是否是原型中的屬性,false就是原型中的屬性,下面這篇文章主要給大家介紹了一道利用hasOwnProperty給數(shù)組去重的面試題,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2018-11-11
javascript設(shè)計(jì)模式之中介者模式學(xué)習(xí)筆記
這篇文章主要為大家詳細(xì)介紹了javascript設(shè)計(jì)模式之中介者模式學(xué)習(xí)筆記,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02
package.json與package-lock.json的區(qū)別及詳細(xì)解釋
不知道大家平時(shí)在開發(fā)中有沒有注意到,你的項(xiàng)目中有兩個(gè)文件:package.json,package-lock.json,應(yīng)該很多人平時(shí)都不會(huì)去關(guān)注這兩個(gè)文件有啥關(guān)系吧,這篇文章主要給大家介紹了關(guān)于package.json與package-lock.json的區(qū)別及詳細(xì)解釋,需要的朋友可以參考下2022-08-08
JavaScript如何實(shí)現(xiàn)對(duì)數(shù)字保留兩位小數(shù)一位自動(dòng)補(bǔ)零
本文給大家介紹基于JavaScript如何實(shí)現(xiàn)對(duì)數(shù)字保留兩位小數(shù)一位自動(dòng)補(bǔ)零的實(shí)例代碼,代碼簡(jiǎn)單易懂,感興趣的朋友一起學(xué)習(xí)吧2015-12-12
微信小程序自定義tabbar custom-tab-bar 6s出不來解決方案(cover-view不兼容)
這篇文章主要介紹了微信小程序自定義tabbar custom-tab-bar 6s出不來解決方案,cover-view不兼容問題,需要的朋友可以參考下2019-11-11
基于MVC方式實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)(JavaScript)
這篇文章主要為大家詳細(xì)介紹了基于MVC方式實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01

