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 相关文章推荐
jquery中邮箱地址 URL网站地址正则验证实例代码
Sep 15 Javascript
深入了解JavaScript中的Symbol的使用方法
Jul 28 Javascript
js编写当天简单日历效果【实现代码】
May 03 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 Javascript
Angular的事件和表单详解
Dec 26 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 Javascript
javascript将非数值转换为数值
Sep 13 Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 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
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
php站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
php实现mysql数据库分表分段备份
2015/06/18 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
python中异常报错处理方法汇总
2016/11/20 Python
Python实现随机选择元素功能
2017/09/14 Python
简单谈谈python基本数据类型
2018/09/26 Python
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
pandas 时间格式转换的实现
2019/07/06 Python
Python3读写ini配置文件的示例
2020/11/06 Python
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
C/C++有关内存的思考题
2015/12/04 面试题
Python面试题:Python是如何进行内存管理的
2014/08/04 面试题
车间组长岗位职责
2013/12/20 职场文书
代理班主任的自我评价
2014/02/04 职场文书
北京故宫导游词
2015/01/31 职场文书