只需要引入jquery-1.3.2.min.js即可实现效果；
<head> <title></title> <style type="text/css"> dl { width: 150px; } dl,dd { margin: 0; } dt { background: gray; font-size: 14px; padding: 2px; margin: 2px; } dt a { color: #FFF; } dd a { color: #000;font-size: 12px; } ul { list-style: none; padding: 2px; } </style> <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("dd:not(:first)").hide(); $("dt a").click(function () { $("dd:visible").slideUp("slow"); $(this).parent().next().slideDown("slow"); return false; }) }) </script></head><body><dl><dt><a href="#">水果</a></dt><dd><ul><li><a href="#">苹果</a></li><li><a href="#">梨子</a></li><li><a href="#">桃子</a></li><li><a href="#">菠萝</a></li><li><a href="#">西瓜</a></li><li><a href="#">葡萄</a></li></ul></dd><dt><a href="#">颜色</a></dt><dd><ul><li><a href="#">红色</a></li><li><a href="#">绿色</a></li><li><a href="#">蓝色</a></li><li><a href="#">白色</a></li><li><a href="#">橙色</a></li><li><a href="#">紫色</a></li></ul></dd><dt><a href="#">班级</a></dt><dd><ul><li><a href="#">net</a></li><li><a href="#">php</a></li><li><a href="#">java</a></li><li><a href="#">3G</a></li><li><a href="#">嵌入式</a></li><li><a href="#">对日</a></li></ul></dd></dl></body></html>
下面就是效果图：
转载于:https://www.cnblogs.com/qzc900809/archive/2013/05/09/3070107.html
相关资源：CSS3横向切换图片手风琴特效.zip