查看效果：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简单的手风琴菜单的更多相关文章

  1. jQuery简单竖排手风琴折叠菜单代码

    项目需求1.刚开始只显示,每个标题, 2.让每个 li列表隔行换色 3.当我点击某个标题时,下面的列表会缓慢的展开,其他列表展开的内容会收起 <!DOCTYPE html> <htm ...

  2. Jquery UI accordion手风琴菜单

    最近学习jQuery,总结了一些心得. 1.引用 <script type="text/javascript" src=jquery.js></script> ...

  3. js写的一个简单的手风琴菜单

    1 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&q ...

  4. jQuery实现多级手风琴树形下拉菜单（源码）

    前几天因为公司的菜单要调整,公司的UI框架是不支持的,所以就自己在网上找了一个下拉菜单,可以支持多级菜单数据的,菜单数据是从xml文件中配置后读取的,网上有许多这方面的例子感觉不是很好用,就打了个包贴 ...

  5. 简单jQuery 实现手风琴菜单

    简单jQuery 实现手风琴菜单 css代码 如下: *{ margin: 0; padding: 0; } #accordion{ width: 500px; } #accordion>div ...

  6. jQuery手风琴菜单！！！！

    jQuery手风琴菜单 第一次发博客也不知道说点什么好,以前敲得一个手风琴菜单刚刚整理出来了,就来分享个大家 手风琴的排版 排版完事了,接下来就写样式吧,把自己喜欢的颜色或者是图片添加进来,就会变成你 ...

  7. jQuery 简单漂亮的 Nav 导航菜单

    自己写的一个简单的导航菜单,先看效果: 鼠标悬浮时菜单项向上移动成蓝底白字,点击之后底部会有蓝条表示当前选中项. 页面代码,菜单的每一项都是一个 div ,其中包括一个 ul 用来放置显示文字等,另一 ...

  8. 一款效果精致的 jQuery 多层滑出菜单插件

    想要以用户友好的方式呈现多级菜单是件不容易的事情,而且还要跨浏览器兼容就更难了.Multi-Level Push Menu 这款 jQuery 插件提供了呈现这种菜单的解决方案,能够让你无限制的展示菜 ...

  9. Angular.js+Bootstrap实现手风琴菜单

    说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...

随机推荐

  1. 冒烟测试 smoking test

    冒烟测试的概念: 版权声明:本文为博主原创文章,未经博主允许不得转载. 冒烟测试既是对软件基本的功能进行测试,测试的对象是每一个新编译的需要正式测试的软件版本,目的是确认软件基本的功能正常,保证软件系 ...

  2. js创建与追加元素

    用javascript创建元素 : var NewNode = document.creatElement('div'); 结合appendChild与insertBefore插入到DOM树中 ins ...

  3. 前端：图文混排-怎么在不使用float的情况下实现想要的效果呢？

    异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 举个例子 重点:display:flex (参考:http://www.360do ...

  4. 【Win 10 应用开发】打印UI元素

    Windows App支持将UI界面进行打印的功能,这与浏览器中的打印网页的用途相近,其好处就是“所见即所得”,直接把界面上呈现的内容打印下来,比重新创建打印图像方便得多. 要在通用App中实现打印, ...

  5. python调取C/C++的dll生成方法

    本文针对Windows平台下,python调取C/C++的dll文件. 1.如果使用C语言,代码如下,文件名为test.c. __declspec(dllexport) int sum(int a,i ...

  6. ASP.NET WebAPi之断点续传下载（上）

    前言 之前一直感觉断点续传比较神秘,于是想去一探究竟,不知从何入手,以为就写写逻辑就行,结果搜索一番,还得了解相关http协议知识,又花了许久功夫去看http协议中有关断点续传知识,有时候发觉东西只有 ...

  7. MySQL utf8mb4 字符集：支持 emoji 表情符号

    转载地址:http://www.linuxidc.com/Linux/2013-05/84360.htm 我用他的方法解决了问题,亲测可用,不要用Nnvicat for Mysql去查询编码,在服务器 ...

  8. 【HTTP劫持和DNS劫持】实际JS对抗

    1.对于DIV注入的,可以初始化时检查全部html代码. 检测是否被劫持比较简单,但对抗就略麻烦,这个在说完第2点之后再解释. 2.对于js注入,可以在window监听DOMNodeInserted事 ...

  9. C/C++ 双精度double 数据相加出错缺陷解释

    不知道有没有人和我一样遇到过这样一个问题,请看下面代码. #include<iostream> using namespace std; int main(){ double a=2.3, ...

  10. 1Z0-053 争议题目解析709

    1Z0-053 争议题目解析709 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 709.A database has three online redo log groups w ...