jQuery实现折叠、展开的菜单组效果代码


Posted in Javascript onSeptember 16, 2015

本文实例讲述了jQuery实现折叠、展开的菜单组效果代码。分享给大家供大家参考。具体如下:

这是一款jQuery实现的漂亮的竖向折叠菜单组,初次运行的时候请刷新一下页面,让jQ载入,这款菜单应用广泛,可用到后台左侧,网站前台也可以用,发现自腾讯微博开放平台,分享给大家一起研究吧。提示:如果有错误,请刷新页面。

运行效果截图如下:

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>一个展开合拢的菜单效果</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<style>
* { margin:0; padding:0; }
ul,li { list-style:none; }
.catalog { width:164px; margin:0 auto;}
.t1 { height:4px; background:url(images/bg_catalog.gif) left top no-repeat; }
.t2 { background:url(images/bg_catalog.gif) -164px top repeat-y; }
.t3 { height:4px; background:url(images/bg_catalog.gif) left bottom no-repeat; }
.t2 h2 { height:81px; background:url(images/bg_catalog_logo.gif) center no-repeat; text-indent:-9999px; }
.t2 h3 { heigth:36px; line-height:36px; margin:0 1px; text-indent:26px; background:url(images/bg_catalog_icon.gif) no-repeat 13px 14px; font-size:14px; border-top:1px solid #fFF; }
.t2 ul { padding:10px 0; font-size:12px; }
.t2 li { text-indent:27px; height:30px; line-height:30px; }
.selected { display:block;}
.unselected {display:none;}
</style>
</head>
<body>
<div class="re_left">
<div class="catalog">
<div class="t1"></div> 
<div class="t2">
 <h2>资源</h2>
 <h3><a href="javascript:void(0);" src="#">平台使用说明</a></h3>
 <ul class="unselected">
 <li><a href="#">平台介绍</a></li>
 <li><a href="#">应用开发说明</a></li>
 <li><a href="#">应用审核流程</a></li>
 <li style="display:none;"><a href="#">成功案例</a></li>
 <li><a href="#">开发者协议</a></li>
 </ul>
 <h3><a href="javascript:void(0);" src="#">API说明</a></h3>
 <ul class="unselected">
 <li><a href="#">API文档</a></li>
 <li><a href="#">Oauth授权说明</a></li>
 <li><a href="#">API调用权限</a></li>
 </ul>
 <h3><a href="javascript:void(0);" src="#">SDK及资源下载</a></h3>
 <ul class="unselected">
 <li><a href="#">SDK下载</a></li>
 <li><a href="#">视觉素材下载</a></li>
 </ul>
 <h3><a href="javascript:void(0);" src="#">帮助中心</a></h3>
 <ul class="unselected">
 <li><a href="#">常见问题解答</a></li>
 <li><a href="#">返回错误码说明</a></li>
 </ul>
</div>
<div class="t3"></div>
</div>
</div>
<script type="text/javascript">
 $(document).ready(function(){
 var catalogIndex=[0,0];
 if (catalogIndex[0]==2){catalogIndex[0]=3;}
 else if(catalogIndex[0]==3){catalogIndex[0]=2;}
 if(catalogIndex.length==0){catalogIndex=[0,0];}
 $(".re_left .catalog h3 a").each(function(){
  $(this).attr("src",$(this).attr("href"));
  });
 $(".re_left .catalog").find("ul").css("border-bottom",0).end().find("h3:eq("+catalogIndex[0]+")").addClass("open").find("a").attr("href","javascript:void(0);").end().next().css("display","block").find("li:eq("+(catalogIndex[1]-1==-1?9999:catalogIndex[1]-1)+")").addClass("active");$(".re_left .catalog").find("h3").last().css("border-bottom-width","0");});
$(".re_left .catalog").find("h3").bind("click",function(){
  if ($(this).hasClass("open"))
  {
  if ($(this).next().find(".active").size()==0)
  {
   $(this).next().slideUp(500,function(){
   $(this).prev().removeClass("open");
   }); 
  }
  else
  {
   $(this).next().slideUp(500,function(){
   $(this).prev().removeClass("open");
   //window.location.href=$(this).prev().find("a").attr("src");
   });
  }
  }
  else
  {
  $(this).parent().find("ul").slideUp("slow").end().find("h3").removeClass("open");
  $(this).addClass("open").next().slideDown(500,function(){
  if ($(this).nextAll("h3").size()>0)
  {$(this).parent().find("h3").last().css("border-bottom-width","1px");}
  else
  {$(this).parent().find("h3").last().css("border-bottom-width","0");}
  window.location.href=$(this).prev().find("a").attr("src");
  });
  }
  return false;
}); 
</script>
<br><div align="center">提示:如果有错误,请刷新页面。</div>
</body>
</html>

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

Javascript 相关文章推荐
JavaScript 语法集锦 脚本之家基础推荐
Nov 15 Javascript
Javascript学习笔记1 数据类型
Jan 11 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 Javascript
深入理解angularjs过滤器
May 25 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
Dec 18 Javascript
angular 服务的单例模式(依赖注入模式下)详解
Oct 22 Javascript
React中this丢失的四种解决方法
Mar 12 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
Dec 17 Javascript
JavaScript原始值与包装对象的详细介绍
May 11 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 #Javascript
js实现tab切换效果实例
Sep 16 #Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 #Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 #Javascript
JS实现光滑展开合拢的菜单效果代码
Sep 16 #Javascript
jQuery实现两款有动画功能的导航菜单代码
Sep 16 #Javascript
javascript中的previousSibling和nextSibling的正确用法
Sep 16 #Javascript
You might like
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
Win2003服务器安全加固设置--进一步提高服务器安全性
2007/05/23 PHP
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
详解vue组件开发脚手架
2018/06/15 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
跟老齐学Python之总结参数的传递
2014/10/10 Python
Python构造函数及解构函数介绍
2015/02/26 Python
Python 实现简单的电话本功能
2015/08/09 Python
Python单链表简单实现代码
2016/04/27 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
python 输出上个月的月末日期实例
2018/04/11 Python
python代码过长的换行方法
2018/07/19 Python
django 实现电子支付功能的示例代码
2018/07/25 Python
Python简单I/O操作示例
2019/03/18 Python
python程序变成软件的实操方法
2019/06/24 Python
django Admin文档生成器使用详解
2019/07/22 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
Flask处理Web表单的实现方法
2021/01/31 Python
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
信访工作者先进事迹
2014/01/17 职场文书
文秘人员工作职责
2014/01/31 职场文书
写自荐信的注意事项
2014/03/09 职场文书
重点工程汇报材料
2014/08/27 职场文书
党的群众路线查摆剖析材料
2014/10/10 职场文书
中学生逃课检讨书
2015/02/17 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang
springboot 自定义配置 解决Boolean属性不生效
2022/03/18 Java/Android
springboot实现string转json json里面带数组
2022/06/16 Java/Android