在jquery中 ， 可以使用fadeIn()方法讓div展開 ， 使用fadeOut()方法收縮 ， 下面小編舉例講解jquery如何實現多個DIV展開收縮 。
需要這些哦
html+jquery
代碼編纂器：Dreamweaver CS5
方式/
1新建一個html文件 ， 定名為test.html ， 用于講解jquery若何實現多個DIV睜開縮短 。
2在test.html文件內 ， 利用div標簽建立三行文字 ， 并設置它們的class屬性為mdiv 。
3在css標簽內 ， 經由過程元素名稱設置div的樣式 ， 設置其寬度和高度為100px ， 布景顏色為紅色 ， 下邊距為20px 。
4在test.html文件內 ， 建立兩個按鈕 ， 一個睜開按鈕 ， 另一個縮短按鈕 ， 并給它們綁定onclick事務 ， 用于觸發執行js函數zkai()和suo() 。
5在js標簽內 ， 別離建立zkai()函數和suo函數 ， 在zkai()函數內 ， 獲得div對象 ， 利用fadeIn()方式睜開div ， 在suo()函數內 ， 獲得div對象 ， 利用fadeOut()方式縮短div 。
6在瀏覽器打開test.html文件 ， 別離點擊按鈕 ， 查看實現的結果 。
總結：1【jquery 如何實現多個DIV展開收縮】1、在test.html文件內 ， 建立多個div ， 并設置其class屬性 。
2、建立兩個button按鈕 ， 用于觸發執行js函數 。
3、別離建立睜開函數和縮短函數 ， 在睜開函數內 ， 獲得div對象 ， 利用fadeIn()方式睜開div ， 在縮短函數內 ， 獲得div對象 ， 利用fadeOut()方式縮短div 。
注重事項fadeIn()方式和fadeOut()方式內的秒數單元為毫秒 。
以上內容就是jquery 如何實現多個DIV展開收縮的內容啦 ， 希望對你有所幫助哦！
猜你喜歡
- ZigBee模塊ZM32如何實現普通自組網
- 如何關閉支付寶免密支付/自動扣款
- 如何高效進行CAN總線故障排查
- 如何使用示波器進行I2C協議的時序分析
- 如何用c語言寫操作系統
- 嗶哩嗶哩 B站如何查看并參加正在舉行的活動
- 藍將云手機視圖模式，如何安裝應用
- 魔力寶貝手游毆茲那克如何進階
- 如何把自己拍攝的視頻上傳到騰訊視頻
- 微博如何防止異常點贊