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 相关文章推荐
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
Javascript中匿名函数的多种调用方式总结
Dec 06 Javascript
JS获取select-option-text_value的方法
Dec 26 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 Javascript
node安装--linux下的快速安装教程
Mar 21 Javascript
详解extract-text-webpack-plugin 的使用及安装
Jun 12 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 Javascript
基于js实现数组相邻元素上移下移
May 19 Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 Javascript
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函数scandir排除特定目录
2014/06/12 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
php实现36进制与10进制转换功能示例
2017/01/10 PHP
JavaScript字符串String和Array操作的有趣方法
2012/12/18 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
2013/12/14 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
javascript 作用于作用域链的详解
2017/09/27 Javascript
echarts整合多个类似option的方法实例
2018/07/10 Javascript
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
[02:49]DAC2018决赛日TOP5 LGD开启黑暗之门绝杀VP
2018/04/08 DOTA
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
python中time包实例详解
2021/02/02 Python
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
RIP版本1跟版本2的区别
2013/12/30 面试题
中学门卫岗位职责
2013/12/26 职场文书
《三顾茅庐》教学反思
2014/04/10 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
男方婚礼答谢词
2015/01/20 职场文书
财务总监岗位职责
2015/02/03 职场文书
勇敢的心观后感
2015/06/09 职场文书
Redis6.0搭建集群Redis-cluster的方法
2021/05/08 Redis
美元符号 $
2022/02/17 杂记
Python中第三方库Faker的使用详解
2022/04/02 Python
Linux中各个目录的作用与内容
2022/06/28 Servers