快捷導(dǎo)航

JavaScript可折疊區(qū)域?qū)崿F(xiàn)代碼

更新時(shí)間：2010年10月15日 19:45:05 作者：

可折疊區(qū)域的基本思想：通過(guò)點(diǎn)擊某個(gè)地方來(lái)顯示或隱藏屏幕中的某個(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)容部分是可以折疊或展開的。在頁(yè)面上，可以使用兩個(gè)<div>元素分別實(shí)現(xiàn)這個(gè)設(shè)計(jì)。

實(shí)現(xiàn)步驟：
在頁(yè)面中插入<div>元素，并加入實(shí)現(xiàn)折疊功能的JS代碼，代碼如下：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

代碼實(shí)現(xiàn)的效果，如下：

您可能感興趣的文章:

相關(guān)文章

Safari5中alert的無(wú)限循環(huán)BUG
猜測(cè)Safari5中將點(diǎn)擊alert框的確定按鈕也當(dāng)成點(diǎn)擊body了。事件一直冒泡到彈出框上。
2011-04-04
微信小程序自定義組件與頁(yè)面的相互傳參
這篇文章主要為大家介紹了微信小程序自定義組件與頁(yè)面的相互傳參過(guò)程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪
2022-04-04
送你43道JS面試題(收藏)
這篇文章主要介紹了送你43道JS面試題,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-06-06
JavaScript深拷貝和淺拷貝概念與用法實(shí)例分析
這篇文章主要介紹了JavaScript深拷貝和淺拷貝概念與用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript深拷貝與淺拷貝的概念、原理、用法及相關(guān)操作技巧,需要的朋友可以參考下
2018-06-06
js常用的繼承--組合式繼承
本篇文章主要介紹了js常用的繼承--組合式繼承的相關(guān)知識(shí)，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-03-03
js微信分享實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了js微信分享的實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
用JS實(shí)現(xiàn)圖片輪播效果代碼（一）
這篇文章主要介紹了用JS實(shí)現(xiàn)圖片輪播效果代碼（一）的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06
JS敏感詞過(guò)濾代碼
本篇文章主要介紹了JS敏感詞過(guò)濾實(shí)例，詳細(xì)的介紹了兩種方法，RegExp（），replace（），具有一定的參考價(jià)值，有興趣的可以了解一下。
2016-12-12
js的三種繼承方式詳解
本文主要介紹了js的三種繼承方式。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-01-01
js變量值傳到php過(guò)程詳解將php解析成數(shù)據(jù)
這篇文章主要介紹了js變量值傳到php過(guò)程詳解將php解析成數(shù)據(jù)，傳參數(shù)去后臺(tái)，用ajax，或者原生js方式拼接url。明白原理，洞悉系統(tǒng)是先解析php，再執(zhí)行html代碼和js代碼。,需要的朋友可以參考下
2019-06-06