首先：上結構
再上css樣式
*
ul
ul li
.small
.big
兩個小重疊在左邊了!有點奇怪，明明設定了absolute絕對定位讓他們相對於最近的父元素定位在left：0；top：0；怎麼會都重合定在容器的左邊呢？
於是我們想到辦法 給他們的li設定relative定位，讓這些小根據他們所在的li進行絕對定位。
這一步搞定，然後會出現什麼問題呢，如果不使用手風琴動畫的話，該效果已經滿足需求了。只不過我們在做手風琴動畫效果的時候，要求一開始除了第乙個li放著的是大以外，其他li的大圖要隱藏即：（current即第乙個li的類名）
.big
.current .small
.current .big
除了第乙個li以外的其他li因為大display:none之後乙個li a裡面只剩乙個用絕對定位脫離普通流的小,這樣li又沒有設定高寬就會塌陷直接"死亡" 導致小的參照沒了,他就會找到再上面的爺元素ul進行參照,於是都擠到ul的左上角(最左邊) 導致所有小重合。解決辦法:給每個li設定寬高,因為我們也是給li設relative的。
所以：給所有相對定位的元素加寬高特別重要，特別是這裡只剩乙個脫離普通流的絕對定位元素。
3 手風琴翻摺效果 手風琴 抖風箱的方法和要領
什麼是抖風箱？左手臂通過快速的顫抖，實際上就是緊縮的 短距離 拉推風箱動作，使手風琴產生一連竄高速重複的樂音，效果類似於小提琴 二胡等弓絃樂器的碎弓 抖弓和顫弓。這種樂音可以營造 渲染出興奮 熱烈 緊張等一些特殊的藝術效果。如何練習手風琴抖風箱呢？首先，抖風箱的動作不是僅憑手腕，而主要是小臂和肘部，...
jquery，scss實現簡單的手風琴效果
首先頁面引用jquery，基本的css，之後開始對頁面進行整體的布局,首先乙個大的div作為容器並且設定容器的大小，之後採用ul li的形式並且要設定為浮動float left，裡面巢狀a標籤為了跳轉頁面 具體如下方 html 之後開始寫css，要想要裡面的在還未全部顯示的時候怎麼辦，這個時候就要設...
jquery實現簡單的手風琴效果
明天我放假，就要去找工作，不知道，我的前端之路，能不能正式開始。菜鳥起飛的機會都沒有，那就尷尬了.純屬練習 效果如圖 選項1 span div 1 div li li span 選項2 span div 2 div li li span 選項3 span div 3 div li li span 選...