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 相关文章推荐
dess中一个简单的多路委托的实现
Jul 20 Javascript
模拟select的代码
Oct 19 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
Aug 28 Javascript
JavaScript事件处理的方式(三种)
Apr 26 Javascript
jQuery实现根据生日计算年龄 星座 生肖
Nov 23 Javascript
利用node.js本地搭建HTTP服务器
Apr 19 Javascript
Vue 项目部署到服务器的问题解决方法
Dec 05 Javascript
layui的面包屑或者表单不显示的解决方法
Sep 05 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
基于vue hash模式微信分享#号的解决
Sep 07 Javascript
JS算法教程之字符串去重与字符串反转
Dec 15 Javascript
Python机器学习之决策树和随机森林
Jul 15 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
延长phpmyadmin登录时间的方法
2011/02/06 PHP
php中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
php微信开发之自定义菜单完整流程
2016/10/08 PHP
JavaScript confirm选择判断
2008/10/18 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
Knockoutjs的环境搭建教程
2012/11/26 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
2013/12/04 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
python实现的简单文本类游戏实例
2015/04/28 Python
Python文件如何引入?详解引入Python文件步骤
2018/12/10 Python
Python新手学习标准库模块命名
2020/05/29 Python
python实现图片,视频人脸识别(opencv版)
2020/11/18 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
护士辞职信范文
2014/01/19 职场文书
完美主义个人的自我评价
2014/02/17 职场文书
中学生英语演讲稿
2014/04/26 职场文书
教师见习期自我鉴定
2014/04/28 职场文书
学习教师法的心得体会
2014/09/03 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
民事纠纷协议书
2016/03/23 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python