你一定用過(guò)書(shū)簽，也一定給你的書(shū)本加過(guò)書(shū)簽，那么你見(jiàn)過(guò)書(shū)簽式的導(dǎo)航嗎？ 你一定見(jiàn)過(guò)手風(fēng)琴，也一定知道彈奏手風(fēng)琴時(shí)的它的外形變化，那么你見(jiàn)過(guò)手風(fēng)琴式的導(dǎo)航嗎？ 如果沒(méi)有，請(qǐng)往下看：
前面的話(huà)：
這篇博文先通過(guò)Javascript做一個(gè)簡(jiǎn)單的手風(fēng)琴效果，讓大家對(duì)手風(fēng)琴效果有一定的了解；緊接著，我們換jquery做類(lèi)似的手風(fēng)琴效果。前面的兩個(gè)例子都很簡(jiǎn)單，接下來(lái)要放大招了，我想用JQ或是原生的JS去做類(lèi)似淘寶網(wǎng)中用到的手風(fēng)琴效果。繼續(xù)回到書(shū)簽問(wèn)題，既然JQ和JS都能實(shí)現(xiàn)那么炫酷的效果，我們用CSS3能不能做出手風(fēng)琴效果的書(shū)簽來(lái)呢？
用Javascript做一個(gè)簡(jiǎn)單的手風(fēng)琴效果：
話(huà)不多說(shuō)，我們先上代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
&nb
