查看效果：http://keleyi.com/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.com/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://keleyi.com/">jQuery</a></dt>

 <dd>

 <ul>

 <li><a href="http://keleyi.com/menu/javascript/" >Javascript</a></li>

 <li><a href="http://keleyi.com/menu/jquery/" >jQuery</a></li>

 <li><a href="http://keleyi.com/menu/html5/" >HTML5</a></li>

 <li><a href="http://keleyi.com/menu/webqd/" >web前端</a></li>

 </ul>

 </dd>

 <dt><a href="http://keleyi.com/game/5/">俄罗斯方块</a></dt>

 <dd>

 <ul>

 <li><a href="http://keleyi.com/dev/453467666cab56d0.htm" target="_blank">jquery图片轮播切换</a></li>

 <li><a href="http://keleyi.com/a/bjac/c6gu08gm.htm" target="_blank">友善的图片轮播</a></li>

 <li><a href="http://keleyi.com/a/bjac/gucmqug3.htm" target="_blank">图片上下箭头滚动</a></li>

 <li><a href="http://keleyi.com/a/bjac/a6e756c811719fff.htm" target="_blank">显示左右箭头的翻页代码</a></li>

 <li><a href="http://keleyi.com/a/bjac/ppdss7ux.htm" target="_blank">弹出灯箱窗口浏览图片</a></li>

 <li><a href="http://keleyi.com/a/bjac/141932b419e08101.htm" target="_blank">ColorBox弹出图片组</a></li>

 <li><a href="http://keleyi.com/a/bjac/06r1x7tg.htm" target="_blank">jquery相册实例</a></li>

 <li><a href="http://keleyi.com/dev/453467666cab56d0.htm" target="_blank">jquery图片轮播切换</a></li>

 <li><a href="http://keleyi.com/a/bjac/c6gu08gm.htm" target="_blank">友善的图片轮播</a></li>

 <li><a href="http://keleyi.com/a/bjac/gucmqug3.htm" target="_blank">图片上下箭头滚动</a></li>

 <li><a href="http://keleyi.com/a/bjac/a6e756c811719fff.htm" target="_blank">显示左右箭头的翻页代码</a></li>

 <li><a href="http://keleyi.com/a/bjac/ppdss7ux.htm" target="_blank">弹出灯箱窗口浏览图片</a></li>

 </ul>

 </dd>

 <dt><a href="http://tool.keleyi.com/">工具</a></dt>

 <dd>

 <ul>

 <li><a href="http://keleyi.com/a/bjac/phhq4ecr.htm">当前时间</a></li>

 <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>

 <li><a href="http://keleyi.com/a/bjac/eilhbrcm.htm">原文</a></li>

 </ul>

 </dd>

 </dl>

 <a href="http://keleyi.com/a/bjac/eilhbrcm.htm">原文</a>像俄罗斯方块这样的标题链接，可以鼠标右键打开。

 </body>

 </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. 浅谈JavaScript的New关键字

    原型和闭包算是JavaScript中最常见,最难以理解,最容易被当做问题的两个部分,当然还有它们的延伸,如作用域链,继承等等吧,我最近也是各种看,各种翻,记录点自己的心得,写写总会让自己的理解更深一些 ...

  2. iOS-应用闪退总结

    一.之前上架的 App 在 iOS 9 会闪退问题(iOS系统版本更新,未配置新版本导致闪退问题) 最新更新:(2015.10.02) 开发环境: Delphi 10 Seattle OS X El ...

  3. javascript运动系列第五篇——缓冲运动和弹性运动

    × 目录 [1]缓冲运动 [2]弹性运动 [3]距离分析[4]步长分析[5]弹性过界[6]弹性菜单[7]弹性拖拽 前面的话 缓冲运动指的是减速运动,减速到0的时候,元素正好停在目标点.而弹性运动同样是 ...

  4. .NET足球赛事资料数据库平台SmartLottery开源发布——全球足球联赛应有尽有

            本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新 开源C#彩票数据资料库系列文章总目录:[目录]C#搭建足球赛事资料库与预测平台与彩票数据分析目录 前2个月,我的系列文 ...

  5. 应用程序框架实战十五:DDD分层架构之领域实体（验证篇）

    在应用程序框架实战十四:DDD分层架构之领域实体(基础篇)一文中,我介绍了领域实体的基础,包括标识.相等性比较.输出实体状态等.本文将介绍领域实体的一个核心内容——验证,它是应用程序健壮性的基石.为了 ...

  6. 窥探Swift之数组安全索引与数组切片

    今天是元宵节,祝大家元宵节快乐!在Swift中的数组和字典中下标是非常常见的,数组可以通过索引下标进行元素的查询,字典可以通过键下标来获取相应的值.在使用数组时,一个常见的致命错误就是数组越界.如果在 ...

  7. EntityFramework 7 OrderBy Skip Take－计算排序分页 SQL 翻译

    先解释一下这个标题的意思,OrderBy 在 Linq 语句中,我们经常使用,比如 OrderBy(b => b.BlogId) 就是对 BlogId 字段进行升序排序,这是针对一个字段的排序, ...

  8. Quartz 在 Spring 中如何动态配置时间--转

    原文地址:http://www.iteye.com/topic/399980 在项目中有一个需求,需要灵活配置调度任务时间,并能自由启动或停止调度. 有关调度的实现我就第一就想到了Quartz这个开源 ...

  9. android studio 导入有so 文件的项目是，程序崩溃的可能原因

    被这玩意坑了2个多小时. ----------------------------------- 由于 android studio 在建项目时,不会自动识别 so 文件,所以在含有so 文件的项目中 ...

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

    1Z0-053 争议题目解析682 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 682.Identify the scenarios in which the RMAN CROS ...