<!DOCTYPE html>

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>jquery 收缩展开效果</title>

<script src="js/jquery-1.7.1.min.js"></script>

<style>

/* 收缩展开效果 */

.text{line-height:22px;padding:0 6px;color:#666;}

.box h1{padding-left:10px;height:22px;line-height:22px;background:#f1f1f1;font-weight:bold;}

.box{position:relative;border:1px solid #e7e7e7;}

</style>

</head>

<body>

<script type="text/javascript">

// 收缩展开效果

$(document).ready(function(){

   $(".box h1").toggle(function(){

     $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");

   },function(){

$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");

   });

});

</script>

<!-- 收缩展开效果 -->

<div class="box">

<h1>收缩展开效果</h1>

<div class="text">

        1<br />

        2<br />

        3<br />

        4<br />

        5<br />

</div>

</div>

<br />

<div class="box">

<h1>收缩展开效果</h1>

<div class="text">

        1<br />

        2<br />

</div>

</div>

<br>

</body>

</html>

jQuery 收缩展开效果的更多相关文章

  1. JS收缩展开效果

    // 收缩展开效果 $(document).ready(function () { $(".box h2").toggle(function () { $(this).next(& ...

  2. 一款由jQuery实现的手风琴式相册图片展开效果

    之前我们有分享过很多jQuery手风琴样式的菜单,比如CSS3手风琴下拉菜单.今天要分享的jQuery手风琴效果很特别,它是手风琴样式的相册图片展开效果.我们只需点击图片缩略图即可展开当前的图片,并将 ...

  3. jQuery 当前展开其他收缩 三级下拉菜单（转载）

    jQuery可展开收缩三级下拉菜单 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  4. jQuery弹性展开收缩菜单插件gooey.js

    分享一款基于jQuery弹性展开收缩菜单插件gooey.js.这是一款基于gooey.js插件实现的弹性菜单特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <hea ...

  5. 右上角鼠标滑过展开收缩动画效果js代码的演示页面

    http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...

  6. jQuery操作之效果

    jQuery操作之效果 效果操作一共分五类:1.基本,2.滑动,3.淡入淡出,4.自定义,5.设置 show(),hide(),toggle() 代码如下: html代码: <p style=& ...

  7. 第一百七十二节，jQuery，动画效果

    jQuery,动画效果 学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 一．显示.隐藏 jQuery 中显示方法为:. ...

  8. jquery垂直展开折叠手风琴二级菜单

    摘要:jquery实现垂直展开二级菜单 最近新开发一个简单项目,用到左侧两级的菜单.找找了手头的文件,竟然没有现成的代码,算了,去网上找找整理下吧. 注:jquery-1.8.3.min.js需要下载 ...

  9. 实用js+css多级树形展开效果导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. (续)linux SD卡初始化---mmc_sd_init_card函数

    mmc_sd_init_card剩下的关于UHS-I的分支结构. uhs-I的初始化流程图如图: 红线标出的部分是已经做了的事,与上一篇那个流程图是一致的,之后就是if分支中做的事. if分支中的函数 ...

  2. codeforces 689C C. Mike and Chocolate Thieves(二分)

    题目链接: C. Mike and Chocolate Thieves time limit per test 2 seconds memory limit per test 256 megabyte ...

  3. rsync+inotify 实现实时同步

    inotify:这个可以监控文件系统中的添加,修改,删除,移动等事件 inotify的特性需要linux内核2.6.13以上的支持 [root@test1 inotify-tools-3.13]# u ...

  4. eoj 3507 坑爹的售票机

    EOJ 3507 坑爹的售票机   问题描述 oxx 和 xjj 决定和小伙伴们一同坐船前往 Xiamen.去 Xiamen 的船票一张 p 元. 当他们满怀兴致地来到港口时发现居然只有不设找零的自动 ...

  5. bzoj 4481: [Jsoi2015]非诚勿扰【期望+树状数组】

    首先很容易计算对于一个如意郎君列表里有x个男性的女性,编号排第i位的男性被选的概率是 \[ p*(1-p)^{i-1}+p*(1-p)^{i-1+n}+p*(1-p)^{i-1+n}+- \] \[ ...

  6. bzoj 4826: [Hnoi2017]影魔【单调栈+树状数组+扫描线】

    参考:https://www.cnblogs.com/lcf-2000/p/6789680.html 这是一个相对码量少的做法,用到了区间修改区间查询的树状数组,详见:www.cnblogs.com/ ...

  7. spoj 1693 COCONUTS - Coconuts【最小割】

    s向所有信仰1的人连(s,i,1),所有信仰0的人连(i,t,1),对于朋友关系,连接双向边,流量为1.跑最大流的结果即为答案. 考虑这样做的意义.最小割就是把总点集分割为两个点集S,T,使得所有\( ...

  8. springboot(八) 嵌入式Servlet容器自动配置原理和容器启动原理

    1.嵌入式Servlet容器自动配置原理 1.1 在spring-boot-autoconfigure-1.5.9.RELEASE.jar => springboot自动配置依赖 jar包下,E ...

  9. concurrent包下的Exchanger练习

    Exchanger可以在两个线程之间交换数据,只能是2个线程,他不支持更多的线程之间互换数据. 当线程A调用Exchange对象的exchange()方法后,他会陷入阻塞状态,直到线程B也调用了exc ...

  10. java-异常简介

    1.简介 ############################################################### ############################### ...