js實現展開關閉效果

2022-07-12 08:39:07 字數 493 閱讀 8635

效果圖呈上:

一開始我是用display:block和none實現的,後來發現不實用,因為用這種方法需要單獨把需要展開的那部分放到乙個標籤裡,然後對這個標籤進行顯示隱藏操作,這樣的特別不利於維護和輸入,綜合對比下採用了overflow:hidden和visible的方法實現的。有了思路,寫起來就很簡單了,「展開」、「關閉」2個字要始終顯示在所有可見區域的下方,這是乙個關鍵點,可以在未展開前設定乙個區域高度,展開之後讓區域高度變為auto,這樣就可以輕鬆實現了,**給大家參考一下:

因為我做的是3個模組,所以用了乙個for迴圈用於分別控制3個模組的展開和關閉。

js**

view code

1 (function

()else21}

22}23}

24}25 })();

使用JS實現展開及收縮效果

html網頁中div如何擋住select,有好多需求中提出這樣的問題。再三研究並尋找解決方法,最後從網上搜尋到這樣的資訊 說是可以用iframe做底,擋住select,也就達到了div擋住select的效果。於是本人喜出望外,急於完成工作任務,查了不少資料,也除錯了很長時間,最後還真好用了。請認真填...

treeview多資料載入 展開關閉控制

思路 1,載入根節點以及根節點的二級目錄 2,使用expand事件,獲取選中節點id,使用 getnodefromindex 方法獲取到treenode 3,遍歷獲取到的treenode節點的子節點,並賦值。這樣,擴充套件了乙個node就會把這個node的子node的子node的內容填充進來,保證了...

用css實現checkbox的開關效果

在移動端html5開發的時候,我們為了美觀,會是checkbox程式設計開關的樣子,比如下面 下面我們就來實現這個效果 一 html 二 css 開關 switch switch before switch checked switch checked before switch.switch an...