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条件判断使用小技巧总结
Sep 08 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
js实现单行文本向上滚动效果实例代码
Nov 28 Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
AngularJS上拉加载问题解决方法
May 23 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 Javascript
JQuery实现动态操作表格
Jan 11 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
简单了解vue.js数组的常用操作
Jun 17 Javascript
微信小程序组件传值图示过程详解
Jul 31 Javascript
p5.js临摹旋转爱心
Oct 23 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 学习提高路线分享
2011/10/23 PHP
js数组的基本操作(很全自己整理的)
2014/10/16 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
2016/12/02 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
监控Nodejs的性能实例代码
2019/07/02 NodeJs
JavaScript的console命令使用实例
2019/12/03 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
python获取文件扩展名的方法
2015/07/06 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
python多进程实现文件下载传输功能
2018/07/28 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
2018/12/12 HTML / CSS
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
最新自我评价范文
2013/11/16 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
教师三严三实学习心得体会
2014/10/11 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书