jQuery实现可展开合拢的手风琴面板菜单


Posted in Javascript onSeptember 15, 2015

本文实例讲述了jQuery实现可展开合拢的手风琴面板菜单。分享给大家供大家参考。具体如下:

这是一款大家都常见的折叠菜单,手风琴折叠面板,会展开和合拢,带点Flash动画效果,修改时请注意:

slideUp : 通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏起来。

slideDown: 通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来

运行效果截图如下:

jQuery实现可展开合拢的手风琴面板菜单

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>折叠菜单</title>
<script src="jquery1.3.2.js"></script>
<script>
$(document).ready(function(){
$("dd:not(:first)").hide(); //隐藏 dd不是第一个的. E:first:相当于E:eq(0) 
// $("dd:not(:last)").hide(); //试试$("dd:not(:last)").hide();
$("dt a").click(function(){
$("dd:visible").slideUp("slow");
 $(this).parent().next().slideDown("slow");
return false;
});
});
</script> 
<style>
 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>
</head>
<body>
<dl>
<dt><a href="#">ASP</a></dt>
 <dd>
 <ul>
  <li><a href="#">论坛社区</a></li>
  <li><a href="#">新闻文章</a></li>
  <li><a href="#">企业网站</a></li>
 </ul>
 </dd>
<dt><a href="#">PHP</a></dt>
 <dd>
 <ul>
  <li><a href="#">论坛社区</a></li>
  <li><a href="#">博客主页</a></li>
 </ul>
 </dd>
<dt><a href="#">脚本资源</a></dt>
 <dd>
 <ul>
  <li><a href="#">AJAX</a></li>
  <li><a href="#">JQUERY</a></li>
  <li><a href="#">JAVASCRIPT</a></li>
 </ul>
 </dd>
</dl>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
点击按钮或链接不跳转只刷新页面的脚本整理
Oct 22 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
jQuery对象的length属性用法实例
Dec 27 Javascript
jquery判断密码强度的验证代码
Apr 22 Javascript
jQuery添加删除DOM元素方法详解
Jan 18 Javascript
模仿password输入框的实现代码
Jun 07 Javascript
ES6新特性八:async函数用法实例详解
Apr 21 Javascript
JavaScript实现区块链
Mar 14 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 Javascript
js实现详情页放大镜效果
Oct 28 Javascript
jQuery实现手风琴特效
Jan 11 jQuery
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 #Javascript
jquery图片轮播特效代码分享
Apr 20 #Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
Sep 15 #Javascript
jQuery焦点图切换特效代码分享
Sep 15 #Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 #Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 #Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 #Javascript
You might like
在PHP中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
php 进度条实现代码
2009/03/10 PHP
PHP 批量删除数据的方法分析
2009/10/30 PHP
PHP isset()与empty()的使用区别详解
2010/08/29 PHP
php 定界符格式引起的错误
2011/05/24 PHP
php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
2020/04/05 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
2017/07/28 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
Python选课系统开发程序
2016/09/02 Python
基于Python的文件类型和字符串详解
2017/12/21 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
python 使用shutil复制图片的例子
2019/12/13 Python
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
骨干教师个人总结
2015/02/11 职场文书
实习班主任自我评价
2015/03/11 职场文书
家长会开场白和结束语
2015/05/29 职场文书
城南旧事读书笔记
2015/06/29 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技