簡單的手風琴JS效果實現
阿新 • • 發佈：2019-02-01
作為一名後端開發程式猿，為了能夠更好的做好後端開發，很多時候需要去了解前端的東西，比如JS。所謂技多不壓身，所以就在閒暇之餘學習學習前端，今天就順便給我們的UI找了一個效果，特此分享出來，做個分享，也為自己這業餘前端做個備忘。下面介紹簡單的手風琴效果實現過程，直接上程式碼：
html程式碼 demo.html（沒有寫樣式，只實現效果，樣式就交給前臺頁面設計吧）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>手風琴Demo</title JS程式碼 demo.js（需引入JQuery的包）：
$(function() {
//設定DIV的高度跟隨螢幕變化而變化，類似於自適應
$(".leftli").height(document.body.scrollHeight);
//隱藏leftli下所有ul元素
$(".leftli ul").hide();
//bind()為.leftli li的li生成點選事件
$(".leftli li").bind("click", function() {
/**
.netx("ul")獲取同級的下一個ul元素
slideToggle(300)展開/關閉當前被點選的ul元素，300為速度，除了可以是數字還可以"slow"、"normal"、"fast"
siblings("ul")遍歷所有的ul元素
**/
$(this).next("ul").slideToggle(300).siblings("ul").slideUp(300);
})
})完成。
利用JQuery能快速實現一些效果，還是非常方便的。若有的方法或屬性用途不明白又想探個究竟的，推薦可到w3school學習學習。
萬事開頭難，CSDN的第一篇部落格就從一個簡單的JS效果開始，工作近3年，覺得是時候該總結一下了，不然經驗就會隨著時間僅僅成為經歷而已。