JavaScript可折疊區(qū)域?qū)崿F(xiàn)代碼
更新時間：2010年10月15日 19:45:05 作者：
可折疊區(qū)域的基本思想：通過點擊某個地方來顯示或隱藏屏幕中的某個區(qū)域。
技術(shù)實現(xiàn)的關(guān)鍵：使用CSS的display特性，display特性的值有：none和block。none即為隱藏；block即為顯示。
動手之前的設(shè)計：可折疊區(qū)域分為兩個區(qū)域：標(biāo)題欄和內(nèi)容區(qū)域。標(biāo)題欄總是可見的，內(nèi)容部分是可以折疊或展開的。在頁面上，可以使用兩個<div>元素分別實現(xiàn)這個設(shè)計。
實現(xiàn)步驟：
在頁面中插入<div>元素，并加入實現(xiàn)折疊功能的JS代碼，代碼如下：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
代碼實現(xiàn)的效果，如下：
動手之前的設(shè)計：可折疊區(qū)域分為兩個區(qū)域：標(biāo)題欄和內(nèi)容區(qū)域。標(biāo)題欄總是可見的，內(nèi)容部分是可以折疊或展開的。在頁面上，可以使用兩個<div>元素分別實現(xiàn)這個設(shè)計。
實現(xiàn)步驟：
在頁面中插入<div>元素，并加入實現(xiàn)折疊功能的JS代碼，代碼如下：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
代碼實現(xiàn)的效果，如下：
相關(guān)文章
猜測Safari5中將點擊alert框的確定按鈕也當(dāng)成點擊body了。事件一直冒泡到彈出框上。2011-04-04
這篇文章主要為大家介紹了微信小程序自定義組件與頁面的相互傳參過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪2022-04-04
這篇文章主要介紹了送你43道JS面試題,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
這篇文章主要介紹了JavaScript深拷貝和淺拷貝概念與用法,結(jié)合實例形式較為詳細(xì)的分析了javascript深拷貝與淺拷貝的概念、原理、用法及相關(guān)操作技巧,需要的朋友可以參考下2018-06-06
本篇文章主要介紹了js常用的繼承--組合式繼承的相關(guān)知識，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要為大家詳細(xì)介紹了js微信分享的實現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了用JS實現(xiàn)圖片輪播效果代碼（一）的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
本篇文章主要介紹了JS敏感詞過濾實例，詳細(xì)的介紹了兩種方法，RegExp（），replace（），具有一定的參考價值，有興趣的可以了解一下。2016-12-12
本文主要介紹了js的三種繼承方式。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
js變量值傳到php過程詳解 將php解析成數(shù)據(jù)
這篇文章主要介紹了js變量值傳到php過程詳解 將php解析成數(shù)據(jù)，傳參數(shù)去后臺，用ajax，或者原生js方式拼接url。明白原理，洞悉系統(tǒng)是先解析php，再執(zhí)行html代碼和js代碼。,需要的朋友可以參考下2019-06-06