jquery实现可点击伸缩与展开的菜单效果代码


Posted in Javascript onAugust 31, 2015

本文实例讲述了jquery实现可点击伸缩与展开的菜单效果代码。分享给大家供大家参考。具体如下:

这是一款jquery实现的点击伸缩与展开的菜单代码,操作方式大家都知道吧,点击一下展开二级菜单的内容,再次点击则合拢,很经典的折叠菜单。

运行效果截图如下:

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>JQ点击伸缩、展开的菜单</title>
<style type="text/css">
body { font-family: Arial; font-size: 16px; }
dl { width: 300px; }
dl,dd { margin: 0; }
dt { background-color:#ae8758; background-image:url(images/201207.png); background-repeat:no-repeat; background-position:5px 13px; font-size: 18px; padding: 5px 5px 5px 20px; margin: 2px; height:29px; line-height:28px; }
dt a { color: #FFF; text-decoration:none; }
dd a { color: #000; }
ul{ list-style: none; padding:5px 5px 5px 20px; margin:0; }
li{ line-height:24px;}
.bg{ background-position:5px -16px;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("dd").hide();
 $("dt a").click(function(){
 $(this).parent().toggleClass("bg");
 $(this).parent().prevAll("dt").removeClass("bg")
 $(this).parent().nextAll("dt").removeClass("bg")
 $(this).parent().next().slideToggle();
 $(this).parent().prevAll("dd").slideUp("slow");
 $(this).parent().next().nextAll("dd").slideUp("slow");
 return false;
 });
});
</script>
</head>
<body>
<dl>
 <dt><a href="#">郑州美食</a></dt>
 <dd>
 <ul>
  <li><a href="#">美食论坛</a></li>
  <li><a href="#">地方小吃</a></li>
  <li><a href="#">郑州酒店</a></li>
 </ul>
 </dd>
 <dt><a href="#">郑州交通</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="#">房产论坛</a></li>
  <li><a href="#">大河论坛</a></li>
  <li><a href="#">天下中原</a></li>
 </ul>
 </dd>
</dl>
</body>
</html>

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

Javascript 相关文章推荐
一个XML格式数据转换为图表的例子
Feb 09 Javascript
JavaScript中的运算符种类及其规则介绍
Sep 26 Javascript
js导航栏单击事件背景变换示例代码
Jan 13 Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 Javascript
jquery小火箭返回顶部代码分享
Aug 19 Javascript
不能不知道的10个angularjs英文学习网站
Mar 23 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
Aug 09 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
Aug 22 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 Javascript
NUXT SSR初级入门笔记(小结)
Dec 16 Javascript
js+html+css实现手动轮播和自动轮播
Dec 30 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 #Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 #Javascript
jquery实现点击变换导航样式的方法
Aug 31 #Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 #Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 #Javascript
Bootstrap的图片轮播示例代码
Aug 31 #Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 #Javascript
You might like
随机头像PHP版
2006/10/09 PHP
PHP编实现程动态图像的创建代码
2008/09/28 PHP
php curl的深入解析
2013/06/02 PHP
php实现简单加入购物车功能
2017/03/07 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
JS 时间显示效果代码
2009/08/23 Javascript
JS 文件传参及处理技巧分析
2010/05/13 Javascript
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
防止文件缓存的js代码
2013/01/10 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
js控制iframe的高度/宽度让其自适应内容
2014/04/09 Javascript
express的中间件cookieParser详解
2014/12/04 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
JS实现访问DOM对象指定节点的方法示例
2018/04/04 Javascript
使用pm2自动化部署node项目的方法步骤
2019/01/28 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
[03:01]2014DOTA2国际邀请赛 DC:我是核弹粉,为Burning和国土祝福
2014/07/13 DOTA
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
Python中给List添加元素的4种方法分享
2014/11/28 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
python 实现提取log文件中的关键句子,并进行统计分析
2019/12/24 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
建筑工程专业毕业生自荐信
2013/10/19 职场文书
食品行业求职人的自我评价
2014/01/19 职场文书
汉语言文学专业求职信
2014/06/19 职场文书
个人年度总结报告
2015/03/09 职场文书
雨中的树观后感
2015/06/03 职场文书
护理工作心得体会
2016/01/22 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书