jQuery实现的经典竖向伸缩菜单效果代码


Posted in Javascript onSeptember 24, 2015

本文实例讲述了jQuery实现的经典竖向伸缩菜单效果代码。分享给大家供大家参考。具体如下:

这是一款使用jquery1.3.2制作的竖向伸缩菜单,每点击一次主菜单,会拉开出对应的二级菜单,再次点击会合拢,效果非常不错。

运行效果截图如下:

jQuery实现的经典竖向伸缩菜单效果代码

在线演示地址如下:

具体代码如下:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery1.3.2竖向的伸缩菜单</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
  $("#wenzhang>dd>dl>dd").hide();
  $.each($("#wenzhang>dd>dl>dt"), function(){
   $(this).click(function(){
    $("#wenzhang>dd>dl>dd ").not($(this).next()).slideUp();
    $(this).next().slideToggle(500);
    //$(this).next().toggle();
   });
  });
  });
 </script>
<style type="text/css">
dl,dd,dt,ul,li{ margin:0; padding:0; list-style:none; color:#333;}
#wenzhang{ width:300px; text-align:center; font-size:12px;border-left:1px solid #dedede;border-right:1px solid #dedede; border-bottom:1px solid #dedede;}
#wenzhang dd dl dt{ border-top:1px solid #dedede; background:#f2f2f2; height:25px; line-height:25px; font-weight:bold;}
#wenzhang ul{ background:#f9f9f9; }
#wenzhang li{ border-top:1px solid #efefef; line-height:25px;}
</style>
</head>
<body>
 <dl id="wenzhang">
 <dd>
 <dl>
  <dt>脚本下载</dt>
  <dd>
  <ul>
  <li>ASP源码下载</li>
  <li>PHP源码下载</li>
  <li>ASP.net源码下载</li>
  </ul>
  </dd>
 </dl>
 </dd>
 <dd>
 <dl>
  <dt>网页特效</dt>
  <dd>
  <ul>
  <li>菜单导航</li>
  <li>层和布局洋</li>
  <li>表单及按钮</li>
  </ul>
  </dd>
 </dl>
 </dd> 
 <dd>
 <dl>
  <dt>最新更新</dt>
  <dd>
  <ul>
   <li>最新更新</li>
   <li>下载排行</li>
   <li>推荐下载</li>
  </ul>
  </dd>
 </dl>
 </dd> 
 </dl>
 <p>如果初次运行,请刷新一次页面,调用了本站的jQuery,可能加载需要些时间。</p>
</body>
</html>

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

Javascript 相关文章推荐
JavaScript 判断浏览器类型及版本
Feb 21 Javascript
JQuery筛选器全系列介绍
Aug 27 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
Bootstrap按钮组件详解
Apr 26 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
Oct 09 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
js实现多张图片每隔一秒切换一张图片
Jul 29 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
Aug 22 Javascript
jquery实现垂直手风琴菜单
Mar 04 jQuery
ES2020系列之空值合并运算符 '??'
Jul 22 Javascript
如何在JavaScript中正确处理变量
Dec 25 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 #Javascript
直接拿来用的15个jQuery代码片段
Sep 23 #Javascript
JS实现漂亮的淡蓝色滑动门效果代码
Sep 23 #Javascript
jQuery Validate验证框架经典大全
Sep 23 #Javascript
Javascript实现的简单右键菜单类
Sep 23 #Javascript
js实现无限级树形导航列表效果代码
Sep 23 #Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
Sep 23 #Javascript
You might like
php curl_init函数用法
2014/01/31 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
javascript 按回车键相应按钮提交事件
2009/11/02 Javascript
按Enter键触发事件的jquery方法实现代码
2014/02/17 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
python实现while循环打印星星的四种形状
2019/11/23 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
写好自荐信的技巧
2013/11/08 职场文书
红色故事演讲稿
2014/05/22 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
法人授权委托书
2014/09/16 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
出差报告范文
2014/11/06 职场文书
小学生作文评语集锦
2014/12/25 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang