jQuery简单的手风琴菜单

查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm

本菜单的HTML代码和JS代码都简洁,完整源代码:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
 3 <head>
 4 <title> jQuery简单的手风琴菜单-柯乐义</title><base target="_blank" />
 5 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
 6 <script type="text/javascript">
 7 $(document).ready(function () {
 8 $("dd:not(:first)").hide();
 9 $("dt a").click(function () {
10 $("dd:visible").slideUp("slow");
11 $(this).parent().next().slideDown("slow");
12 return false;
13 });
14 });
15 </script>
16 <style>
17 body { font-family:'Verdana','宋体'; font-size: 16px; }
18 dl { width: 300px; }
19 dl,dd { margin: 0; }
20 dt { background: #F39; font-size: 18px; padding: 5px; margin: 2px; }
21 dt a { color: #FFF; }
22 dd a { color: #000; }
23 ul { list-style: none; padding: 5px; }
24 </style>
25 </head>
26 
27 <body>
28 <dl>
29 <dt><a href="http://keleyi.com/">jQuery</a></dt>
30 <dd>
31 <ul>
32 <li><a href="http://keleyi.com/menu/javascript/" >Javascript</a></li>
33 <li><a href="http://keleyi.com/menu/jquery/" >jQuery</a></li>
34 <li><a href="http://keleyi.com/menu/html5/" >HTML5</a></li>
35 <li><a href="http://keleyi.com/menu/webqd/" >web前端</a></li>
36 
37 </ul>
38 </dd>
39 <dt><a href="http://keleyi.com/game/5/">俄罗斯方块</a></dt>
40 <dd>
41 <ul>
42 <li><a href="http://keleyi.com/dev/453467666cab56d0.htm" target="_blank">jquery图片轮播切换</a></li>
43 <li><a href="http://keleyi.com/a/bjac/c6gu08gm.htm" target="_blank">友善的图片轮播</a></li>
44 <li><a href="http://keleyi.com/a/bjac/gucmqug3.htm" target="_blank">图片上下箭头滚动</a></li>
45 <li><a href="http://keleyi.com/a/bjac/a6e756c811719fff.htm" target="_blank">显示左右箭头的翻页代码</a></li>
46 <li><a href="http://keleyi.com/a/bjac/ppdss7ux.htm" target="_blank">弹出灯箱窗口浏览图片</a></li>
47 <li><a href="http://keleyi.com/a/bjac/141932b419e08101.htm" target="_blank">ColorBox弹出图片组</a></li>
48 <li><a href="http://keleyi.com/a/bjac/06r1x7tg.htm" target="_blank">jquery相册实例</a></li>
49 <li><a href="http://keleyi.com/dev/453467666cab56d0.htm" target="_blank">jquery图片轮播切换</a></li>
50 <li><a href="http://keleyi.com/a/bjac/c6gu08gm.htm" target="_blank">友善的图片轮播</a></li>
51 <li><a href="http://keleyi.com/a/bjac/gucmqug3.htm" target="_blank">图片上下箭头滚动</a></li>
52 <li><a href="http://keleyi.com/a/bjac/a6e756c811719fff.htm" target="_blank">显示左右箭头的翻页代码</a></li>
53 <li><a href="http://keleyi.com/a/bjac/ppdss7ux.htm" target="_blank">弹出灯箱窗口浏览图片</a></li>
54 </ul>
55 </dd>
56 <dt><a href="http://tool.keleyi.com/">工具</a></dt>
57 <dd>
58 <ul>
59 <li><a href="http://keleyi.com/a/bjac/phhq4ecr.htm">当前时间</a></li>
60 <li><a href="http://keleyi.com/a/bjac/1juhjegr.htm">替换图片</a></li><li><a href="http://keleyi.com/a/bjac/c6gu08gm.htm" title="jQuery友善的图片轮播(含首页和尾页)">图片轮播</a></li><li><a href="http://keleyi.com/a/bjac/opnw2awa.htm">appendTo方法</a></li>
61 <li><a href="http://keleyi.com/a/bjac/eilhbrcm.htm">原文</a></li>
62 
63 </ul>
64 </dd>
65 </dl>
66 <a href="http://keleyi.com/a/bjac/eilhbrcm.htm">原文</a>像俄罗斯方块这样的标题链接,可以鼠标右键打开。
67 </body>
68 </html>

其中$("dd:visible")请参考:http://keleyi.com/a/bjac/q5rgk1mq.htm

$("dd:not(:first)")表示除了第一个dd元素之外的其他所有dd元素,更多请参考:http://keleyi.com/a/bjac/8ah0br9p.htm

原文:http://keleyi.com/a/bjac/eilhbrcm.htm

web前端:http://www.cnblogs.com/jihua/p/webfront.html

你可能感兴趣的:(jQuery简单的手风琴菜单)