JavaScript可折疊區(qū)域?qū)崿F(xiàn)代碼
更新時(shí)間：2010年10月15日 19:45:05 作者：
可折疊區(qū)域的基本思想：通過點(diǎn)擊某個(gè)地方來顯示或隱藏屏幕中的某個(gè)區(qū)域。
技術(shù)實(shí)現(xiàn)的關(guān)鍵：使用CSS的display特性，display特性的值有：none和block。none即為隱藏；block即為顯示。
動(dòng)手之前的設(shè)計(jì)：可折疊區(qū)域分為兩個(gè)區(qū)域：標(biāo)題欄和內(nèi)容區(qū)域。標(biāo)題欄總是可見的，內(nèi)容部分是可以折疊或展開的。在頁面上，可以使用兩個(gè)<div>元素分別實(shí)現(xiàn)這個(gè)設(shè)計(jì)。
實(shí)現(xiàn)步驟：
在頁面中插入<div>元素，并加入實(shí)現(xiàn)折疊功能的JS代碼，代碼如下：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
代碼實(shí)現(xiàn)的效果，如下：
動(dòng)手之前的設(shè)計(jì)：可折疊區(qū)域分為兩個(gè)區(qū)域：標(biāo)題欄和內(nèi)容區(qū)域。標(biāo)題欄總是可見的，內(nèi)容部分是可以折疊或展開的。在頁面上，可以使用兩個(gè)<div>元素分別實(shí)現(xiàn)這個(gè)設(shè)計(jì)。
實(shí)現(xiàn)步驟：
在頁面中插入<div>元素，并加入實(shí)現(xiàn)折疊功能的JS代碼，代碼如下：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
代碼實(shí)現(xiàn)的效果，如下：
您可能感興趣的文章:
- javascript仿qq界面的折疊菜單實(shí)現(xiàn)代碼
- js實(shí)現(xiàn)超簡單的展開、折疊目錄代碼
- JS實(shí)現(xiàn)鼠標(biāo)滑過折疊與展開菜單效果代碼
- js一般方法改寫成面向?qū)ο蠓椒ǖ臒o限級(jí)折疊菜單示例代碼
- JS實(shí)現(xiàn)無限級(jí)網(wǎng)頁折疊菜單(類似樹形菜單)效果代碼
- JS實(shí)現(xiàn)的豎向折疊菜單代碼
- js實(shí)現(xiàn)帶緩沖效果的仿QQ面板折疊菜單代碼
- JS實(shí)現(xiàn)仿QQ面板的手風(fēng)琴效果折疊菜單代碼
- JS+CSS實(shí)現(xiàn)的豎向簡潔折疊菜單效果代碼
- Javascript實(shí)現(xiàn)代碼折疊功能
相關(guān)文章
js實(shí)現(xiàn)base64文件的處理以及下載方法
Base64是一種將二進(jìn)制數(shù)據(jù)編碼為ASCII字符的編碼方式,這篇文章主要給大家介紹了關(guān)于js實(shí)現(xiàn)base64文件的處理以及下載的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
本教程使用js實(shí)現(xiàn)兩張圖片切換/多張圖片輪換/結(jié)束執(zhí)行等效果，感興趣的朋友可以參考下哈，希望對(duì)你學(xué)習(xí)js有所幫助2013-04-04
JS實(shí)現(xiàn)網(wǎng)頁導(dǎo)航條特效
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)網(wǎng)頁導(dǎo)航條特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
Bootstrap框架的學(xué)習(xí)教程詳解(二)
Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。本文給大家介紹Bootstrap框架的學(xué)習(xí)教程詳解，對(duì)bootstrap框架感興趣的朋友跟著小編一起學(xué)習(xí)吧2016-10-10
JavaScript中利用構(gòu)造器函數(shù)模擬類的方法
JavaScript中沒有類的概念，所以其在對(duì)象創(chuàng)建方面與面向?qū)ο笳Z言有所不同。這篇文章主要介紹了JavaScript中利用構(gòu)造器函數(shù)模擬類的方法，文中給出了詳細(xì)的示例代碼和介紹，需要的朋友可以參考下，下面一起看看吧。2017-02-02
分享15個(gè)JavaScript的重要數(shù)組方法
這篇文章主要介紹了分享15個(gè)JavaScript的重要數(shù)組方法，數(shù)組方法的重要一點(diǎn)是有些是可變的，有些是不可變的。在決定針對(duì)特定問題使用哪種方法時(shí)，務(wù)必牢記，下文就來分享重要數(shù)組方法，需要的小伙伴可以參考一下2022-05-05
原名：SyntaxHighlighter，是一款用于web頁面的代碼著色工具，可以用來著色多種語言，可以是HTML,CSS,Javascript,還可以是C,JAVA等編程語言。最早見于Yahoo的YUI，當(dāng)時(shí)還屬于自由軟件，最近打開官方網(wǎng)站發(fā)現(xiàn)已被goolge收編。
2008-09-09 
JS中比Switch...Case更優(yōu)雅的多條件判斷寫法
這篇文章主要給大家介紹了關(guān)于JS中比Switch...Case更優(yōu)雅的多條件判斷寫法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09 
這篇文章主要給大家分享了一位C#程序員入門學(xué)習(xí)微信小程序的筆記，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03