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 相关文章推荐
10个实用的脚本代码工具
May 04 Javascript
基于Jquery的简单图片切换效果
Jan 06 Javascript
关于JavaScript中的关联数组分析
Apr 09 Javascript
jQuery对象的链式操作用法分析
May 10 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
Jan 08 Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 Javascript
less简单入门(CSS 预处理语言)
Mar 08 Javascript
ES6新特性之Object的变化分析
Mar 31 Javascript
详解Angular2 之 结构型指令
Jun 21 Javascript
微信小程序使用字体图标的方法
May 23 Javascript
关于layui的动态图标不显示的解决方法
Sep 04 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 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的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
PHP PDOStatement::setAttribute讲解
2019/02/01 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
javascript父、子页面交互技巧总结
2014/08/08 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
javascript实现可拖动变色并关闭层窗口实例
2015/05/15 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
jQuery实现查找链接文字替换属性的方法
2016/06/27 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
angularjs中的$eval方法详解
2017/04/24 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
详解python单例模式与metaclass
2016/01/15 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
介绍一下Make? 为什么使用make
2016/07/31 面试题
记帐员岗位责任制
2014/02/08 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
审计班子对照检查材料
2014/08/27 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书