js實現點擊后滑動展開或收縮效果

新建一個html文件，定名為test.html，用于實現點擊后滑動縮短或睜開結果。

注：需要加載jquery.min.js庫文件。

在test.html頁面，建立一個div模塊，div內利用p標簽界說了兩段文字，代碼如下：

在test.html頁面，再利用p標簽建立一個class為flip的“請點擊這里”段落，用于下面實現點擊這里時，睜開或縮短上一步建立的div模塊。

利用css對上面建立的html元素進行樣式結構，美化其展示的結果，需要出格注重的是類名為panel的div，需要設置其為埋沒結果。代碼如下：

在頁面加載時，利用$(".flip")獲得點擊的對象，當其被點擊時，執行響應的函數實現睜開或縮短的結果。

當“請點擊這里”被點擊時，利用slideToggle()方式對div對象進行睜開或縮短狀況的切換，并在slideToggle()方式里設置slow結果，實現遲緩滑動切換狀況的結果。

在瀏覽器運行test.html，點擊“請點擊這里”，查看實現的睜開或縮短的結果。

0 條評論