查看效果：http:///keleyi/phtml/menu/5.htm
本菜單的HTML代碼和JS代碼都簡潔，完整源代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jQuery的可折疊的側邊欄菜單-</title><base target="_blank" />
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("dd:not(:first)").hide();
$("dt a").click(function () {
$("dd:visible").slideUp("slow");
$(this).parent().next().slideDown("slow");
return false;
});
});
</script>
<style>
body { font-family:'Verdana','宋體'; font-size: 16px; }
dl { width: 300px; }
dl,dd { margin: 0; }
dt { background: #F39; font-size: 18px; padding: 5px; margin: 2px; }
dt a { color: #FFF; }
dd a { color: #000; }
ul { list-style: none; padding: 5px; }
</style>
</head>
<body>
<dl>
<dt><a href="http:///">jQuery</a></dt>
<dd>
<ul>
<li><a href="http:///menu/javascript/" >Javascript</a></li>
<li><a href="http:///menu/jquery/" >jQuery</a></li>
<li><a href="http:///menu/html5/" >HTML5</a></li>
<li><a href="http:///menu/webqd/" >web前端</a></li>
</ul>
</dd>
<dt><a href="http:///game/5/">俄羅斯方塊</a></dt>
<dd>
<ul>
<li><a href="http:///dev/453467666cab56d0.htm" target="_blank">jquery圖片輪播切換</a></li>
<li><a href="http:///a/bjac/c6gu08gm.htm" target="_blank">友善的圖片輪播</a></li>
<li><a href="http:///a/bjac/gucmqug3.htm" target="_blank">圖片上下箭頭滾動</a></li>
<li><a href="http:///a/bjac/a6e756c811719fff.htm" target="_blank">顯示左右箭頭的翻頁代碼</a></li>
<li><a href="http:///a/bjac/ppdss7ux.htm" target="_blank">彈出燈箱窗口浏覽圖片</a></li>
<li><a href="http:///a/bjac/141932b419e08101.htm" target="_blank">ColorBox彈出圖片組</a></li>
<li><a href="http:///a/bjac/06r1x7tg.htm" target="_blank">jquery相冊實例</a></li>
<li><a href="http:///dev/453467666cab56d0.htm" target="_blank">jquery圖片輪播切換</a></li>
<li><a href="http:///a/bjac/c6gu08gm.htm" target="_blank">友善的圖片輪播</a></li>
<li><a href="http:///a/bjac/gucmqug3.htm" target="_blank">圖片上下箭頭滾動</a></li>
<li><a href="http:///a/bjac/a6e756c811719fff.htm" target="_blank">顯示左右箭頭的翻頁代碼</a></li>
<li><a href="http:///a/bjac/ppdss7ux.htm" target="_blank">彈出燈箱窗口浏覽圖片</a></li>
</ul>
</dd>
<dt><a href="http://tool./">工具</a></dt>
<dd>
<ul>
<li><a href="http:///a/bjac/phhq4ecr.htm">當前時間</a></li>
<li><a href="http:///a/bjac/1juhjegr.htm">替換圖片</a></li><li><a href="http:///a/bjac/c6gu08gm.htm" title="jQuery友善的圖片輪播(含首頁和尾頁)">圖片輪播</a></li><li><a href="http:///a/bjac/opnw2awa.htm">appendTo方法</a></li>
<li><a href="http:///a/bjac/eilhbrcm.htm">原文</a></li>
</ul>
</dd>
</dl>
<a href="http:///a/bjac/eilhbrcm.htm">原文</a>像俄羅斯方塊這樣的標題鏈接，可以鼠標右鍵打開。
</body>
</html>
其中$("dd:visible")請參考：http:///a/bjac/q5rgk1mq.htm
$("dd:not(:first)")表示除了第一個dd元素之外的其他所有dd元素