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

资源

平台使用说明" >平台使用说明

API说明" >API说明

SDK及资源下载" >SDK及资源下载

帮助中心" >帮助中心

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:39 PM

jquery 展开折叠

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-fade-in-out-menu-group-codes/

具体代码如下：

<!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 id="资源">资源</h2>
 <h3 id="a-href-javascript-void-src-平台使用说明-a"><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 id="a-href-javascript-void-src-API说明-a"><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 id="a-href-javascript-void-src-SDK及资源下载-a"><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 id="a-href-javascript-void-src-帮助中心-a"><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&#63;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程序设计有所帮助。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7564

CakePHP 教程

1386

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

谷歌 Pixel 9 Pro Fold 手机壳曝光：外屏 6.4 英寸、内屏 8.02 英寸 Jun 25, 2024 pm 02:35 PM

6月25日消息，消息源ytechb昨日（6月24日）发布博文，分享了谷歌Pixel9ProFold手机壳渲染图，再次展示了这款折叠屏背面的设计。此前消息，谷歌将于今年10月发布Pixel9系列手机，除了Pixel9系列三款手机之外，PixelFold也纳入到Pixel9系列中，正式上架后名称为Pixel9ProFold。本次曝光的手机壳来自配件厂商Torro，该公司的英国和美国在线商店已经列出了该产品手机壳，并披露了这款手机的设计和显示屏尺寸。页面中展示了大量Pixel9ProFold手机壳渲染

三星万元折叠机皇W25曝光：500万像素屏下前摄机身更薄了 Aug 23, 2024 pm 12:43 PM

8月23日消息，三星即将推出新款折叠手机W25，预计9月底亮相，将在屏下前摄、机身厚度上作出相应的提升。据报道，三星W25代号为Q6A，将配备500万像素屏下摄像头，相较于GalaxyZFold系列的400万像素摄像头有所提升。此外，W25的外屏前置摄像头和超广角摄像头预计分别为1000万和1200万像素。在设计上，W25折叠状态下的厚度约为10毫米，比标准版GalaxyZFold6薄约2毫米。屏幕方面，W25的外屏为6.5英寸，内屏为8英寸，而GalaxyZFold6的外屏为6.3英寸，内屏为

三星Galaxy Z Flip 6机模首曝：边框更窄折痕依然存在 Jun 22, 2024 am 03:28 AM

6月21日消息，近日，外媒在网络上放出了三星GalaxyZFlip6的机模照片。根据图片可以了解到，三星GalaxyZFlip6的边框将进一步收窄，这意味着手机在折叠状态下的宽度可能会减小，也将会提供更舒适的握持感和便携性。而且，GalaxyZFlip6的机模相比上一代ZFlip5，整机显得更加方正一些，背面的摄像头模块也要更加突出，预计是采用了新的相机传感器。不过，从正面看上去，手机的折痕依然比较明显，但考虑到泄露的是模型机，与真机可能会会有些许差距，因此仅供参考。在性能配置方面，Galaxy

折叠屏手机最大短板：没有核心应用场景 Mar 16, 2024 am 09:04 AM

我们今天探讨的并非某一款产品到底怎么样，而是回归到“折叠屏”话题本身上来，探究一下折叠屏手机的“合理性”。首先还是看一看折叠屏手机的市场表现，根据IDC最新数据报告显示，2023年全年中国折叠屏手机市场出货量约700.7万台，同比增长114.5%。其中，2023年第四季度中国折叠屏手机市场出货量约277.1万台，同比增长149.6%，数据看上去确实还不错，增长也很强势。不过与2023年中国市场智能手机2.7亿左右出货量相比，这个数据就着实不太够看了。总的来说

你想知道word折叠吗 Mar 19, 2024 pm 07:49 PM

在word编辑文本内容后，需要查看检查所编辑的内容。如果内容较多时，查阅比较不方便，如何解决这个问题呢，这时就需要word折叠的方法。下面就让小编跟各位小伙伴们分享下方法教程吧！首先，打开电脑上的Word文档，输入所需内容并选中，然后单击菜单栏中的“开始”选项，接着选择一个样式应用到刚才选中的文字段落中。你可以参考下方图片中标有红色圈的部分。2.然后这样，选中的文字段落就变换了样式，多了一个小箭头，如下方图片红色圈中部分所示：3.点击小箭头就能自由展开或者折叠先前所选的文字段落，或者直接右键，从

jQuery中如何使用PUT请求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT请求方式？在jQuery中，发送PUT请求的方法与发送其他类型的请求类似，但需要注意一些细节和参数设置。PUT请求通常用于更新资源，例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先，确保引入了jQuery库文件，然后可以通过以下方式发送PUT请求：$.ajax({u

jQuery小技巧：快速修改页面所有a标签的文本 Feb 28, 2024 pm 09:06 PM

标题：jQuery小技巧：快速修改页面所有a标签的文本在网页开发中，我们经常需要对页面中的元素进行修改和操作。在使用jQuery时，有时候需要一次性修改页面中所有a标签的文本内容，这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本，同时给出具体的代码示例。首先，我们需要引入jQuery库文件，确保在页面中引入了以下代码：&lt

使用jQuery修改所有a标签的文本内容 Feb 28, 2024 pm 05:42 PM

标题：使用jQuery修改所有a标签的文本内容jQuery是一款流行的JavaScript库，被广泛用于处理DOM操作。在网页开发中，经常会遇到需要修改页面上链接标签（a标签）的文本内容的需求。本文将介绍如何使用jQuery来实现这个目标，并提供具体的代码示例。首先，我们需要在页面中引入jQuery库。在HTML文件中添加以下代码：

See all articles

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题