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 相关文章推荐
增强的 JavaScript 的 trim 函数的代码
Aug 13 Javascript
javascript 年月日联动实现核心代码
Dec 21 Javascript
JQuery中Ajax()的data参数类型实例分析
Dec 15 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
JS面试题---关于算法台阶的问题
Jul 26 Javascript
Bootstrap3 模态框使用实例
Feb 22 Javascript
jQuery实现弹窗居中效果类似alert()
Feb 27 Javascript
js实现字符全排列算法的简单方法
May 01 Javascript
Vue实现virtual-dom的原理简析
Jul 10 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
Mar 24 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遍历目录viewDir函数
2009/12/15 PHP
PHP中strtotime函数使用方法分享
2012/01/10 PHP
php表单提交实例讲解
2015/11/12 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
解决PHP使用CURL发送GET请求时传递参数的问题
2019/10/11 PHP
新浪的图片新闻效果
2007/01/13 Javascript
DOM 基本方法
2009/07/18 Javascript
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
获取body标签的两种方法
2011/10/13 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
sails框架的学习指南
2014/12/22 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
javascript中一些util方法汇总
2015/06/10 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
深入理解AngularJs-scope的脏检查(一)
2017/06/19 Javascript
vue实现商城上货组件简易版
2017/11/27 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
关于RxJS Subject的学习笔记
2018/12/05 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
初学python数组的处理代码
2011/01/04 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
在Python IDLE 下调用anaconda中的库教程
2020/03/09 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
Python 发送邮件方法总结
2020/08/10 Python
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
翻译专业应届生求职信
2013/11/23 职场文书
交通安全教育主题班会
2015/08/12 职场文书