jQuery實現手風琴效果，這里是縱向的，效果圖如下：
在此處是當鼠標移動到p上面的時候，p下面的ol里面的內容顯現出來
主要用了html，css，jQuery的知識
先把大致需要的東西寫出來，此處用的是ul，一個ul里面用了4個li，在li下又有p標簽和新的內容，這里p代表的是詩歌的題目和作者的名字，p標簽下面的內容是詩歌的具體內容，p標簽下面用了一個ol和4個li，放詩詞內容的
在style中寫了一些樣式。
首先寫*的樣式，設置margin和padding為0，這樣看起來距離邊上沒有間隙
接下來寫ul和li的樣式
list-style：設置列表項目相關內容
設置一下ul寬，高，背景顏色，margin之類的
ul>li選擇ul的直接后代,li，設置字體居中，下邊框的大小，行高
設置ul里面的li下面的ol，也就是詩歌的內容部分，設置背景顏色，在沒有點擊的時候隱藏，點擊的時候顯示，這里設置一下，display為none；
最后在設置詩歌里面的每行內容的行高
到此，html和css的部分都寫完了，下面開始寫jQuery的部分
此處要點擊的是p也就是詩歌的名字和作者，在這里寫的是鼠標移動事件
$(this).next().slideDown().end().parent().siblings().children("ol").hide();
在最后附上完整的代碼僅供大家參考
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.3.min.js"></script>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
ul,li {
list-style: none
}
ul {
width: 300px;
background:pink;
margin: 50px auto;
}
ul>li {
line-height: 50px;
text-align: center;
border-bottom: 1px solid #ccc;
}
ul>li>ol {
background: paleturquoise;
display: none;
}
ul>li>ol>li {
line-height: 50px;
}
</style>
</head>
<body>
<ul id="ul">
<li>
<p>使至塞上 王維</p>
<ol>
<li>單車欲問邊，屬國過居延</li>
<li>征蓬出漢塞，歸雁入胡天</li>
<li>大漠孤煙直，長河落日圓</li>
<li>蕭關逢候騎，都護在燕然</li>
</ol>
</li>
<li>
<p>登黃鶴樓 崔顥</p>
<ol>
<li>昔人已乘黃鶴去，此地空余黃鶴樓</li>
<li>黃鶴一去不復返，白雲千載空悠悠</li>
<li>晴川歷歷漢陽樹，芳草萋萋鸚鵡洲</li>
<li>日暮鄉關何處是，煙波江上使人愁</li>
</ol>
</li>
<li>
<p>無題 李商隱</p>
<ol>
<li>相見時難別亦難，東風無力百花殘</li>
<li>春蠶到死絲方盡，蠟炬成灰淚始干</li>
<li>曉鏡但愁雲鬢改，夜吟應覺月光寒</li>
<li>蓬山此去無多路，青鳥殷勤為探看</li>
</ol>
</li>
<li>
<p>過故人庄 孟浩然</p>
<ol>
<li>故人具雞黍，邀我至田家。</li>
<li>綠樹村邊合，青山郭外斜。</li>
<li>開軒面場圃，把酒話桑麻。</li>
<li>待到重陽日，還來就菊花。</li>
</ol>
</li>
</ul>
<script type="text/javascript">
$("#ul>li>p").mousemove(function(){
$(this).next().slideDown().end().parent().siblings()
.children("ol").hide();
});
</script>
</body>
</html>